Affichage différent sous IE et FireFox du menu et du footer

Bonjour.

Les deux éléments suivants s'affichent différemment sous IE et FF
1. Les sous-rubrique du menu (sous FF, sous IE 7)
2. Le footer (sous FF, sous IE 7). Sous FF footer touche le bord inférieur du navigateur, sous IE il ne le touche pas.

Je voudrais que mes sous-rubriques apparaissent sous IE comme elles apparaissent sous FF (c'est-à-dire plus à gauche) et je voudrais que mon footer touche le bord inférieur du navigateur sous IE comme il touche sous FF.

Code HTML du menu

<div = "sous-menu">
   <div class="element_menu">
      <h4>Rubrique 1</h4>
      <ul>
        <li><a href="#">Sous-rubrique 1.1</a></li>
        <li><a href="#">Sous-rubrique 1.2</a></li>
        <li><a href="#">Sous-rubrique 1.3</a></li>
      </ul>
    </div>
    <div class="element_menu">
      <h4>Sous-rubrique 2</h4>
      <ul>
        <li><a href="#">Sous-rubrique 2.1</a></li>
        <li><a href="#">Sous-rubrique 2.2</a></li>
      </ul>
    </div>
    <div class="element_menu">
      <h4>Sous-rubrique 3</h4>
      <ul>
        <li><a href="#">Sous-rubrique 3.1</a></li>
        <li><a href="#">Sous-rubrique 3.2</a></li>
      </ul>
    </div>
</div>

Code CSS du menu

#sous_menu {
	background-image:url(sous-menu.png);
	background-repeat:no-repeat;
	position:absolute;
	width:222px;
	height:365px;
	left:43px;
	top:150px;
 }
.element_menu{
        font-family:"Times New Roman", Times, serif;
	font-size:17px;
	color:#ccff66;
	text-align:left;
	padding-top:1px;
	padding-left:13px;
	}
.element_menu ul {
        list-style:none;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	text-align:left;
	font-weight:bold;
	padding-left:2px;
	}
.element_menu a {
    color:#FFFFFF;
	}
.element_menu a:hover {
    color:#000099;
	}

Code HTML du Footer

<div id ="footer">
</div>

Code CSS du Footer

#footer {
      background-image:url(footer.png);
      margin-left: auto;
      margin-right: auto;
      width:990px;
      height:144px;
      margin-bottom:-1%;
      }

Merci de votre aide
Modifié par Arrmani (08 Sep 2008 - 19:05)

Bonsoir et bienvenu sur le Forum

Pour commencer, je te conseillerais de t'affranchir de quelques <div> superflus, comme ceci :

<div = "sous-menu">
      <h4>Rubrique 1</h4>
      <ul>
        <li><a href="#">Sous-rubrique 1.1</a></li>
        <li><a href="#">Sous-rubrique 1.2</a></li>
        <li><a href="#">Sous-rubrique 1.3</a></li>
      </ul>
      <h4>Sous-rubrique 2</h4>
      <ul>
        <li><a href="#">Sous-rubrique 2.1</a></li>
        <li><a href="#">Sous-rubrique 2.2</a></li>
      </ul>
      <h4>Sous-rubrique 3</h4>
      <ul>
        <li><a href="#">Sous-rubrique 3.1</a></li>
        <li><a href="#">Sous-rubrique 3.2</a></li>
      </ul>
</div>

Pour la suite, tu vas répartir les propriétés du div disparu aux éléments <ul>, <li> et <h4> contenus dans #sous-menu en utilisant les cascades :

#sous-menu h4 { font-size : 17px; }
#sous-menu ul { font-size : 12px; }

Voici un exemple qui te permet de styler de la même manière toutes les listes contenues dans #sous-menu et tous les titres de niveau 4 également contenus dans #sous-menus.
Sympa, non ?

Pour répondre à ta question, les espaces que tu rencontres sont tout à fait normaux.
Voilà comment le résoudre : Comment corriger un espace à gauche d'une liste différent entre IE, Firefox et Opera ?

Enfin, je ne saurais que trop te conseiller de ne pas spécifier la taille de police en px, mais en em.
En effet, IE (6 uniquement, j'ai un doute ?) interdit alors tout agrandissement de police par l'utilisateur, ce qui peut s'avérer très handicapant pour les personnes dont la vue nécessite un grossissement de caractère.

Plus d'infos dans cet article : Typographie web : gérer la taille du texte avec les « em »

Cygnus merci pour la réponse. Je vais lire les articles cités et je vous tiens au courant si le problème est résolu.

Je voudrais aussi poser une petite question. Comment font les pro lorsqu'ils veulent positionner plusieurs éléments sur un autre élément comme par exemple header. Admettons que je veux placer aux endroits précis sur mon header
- deux petits drapeaux (images)
- une massage "site des fans de..."
- lien "contact"

Est-ce le code html ci-dessous est correcte ou bien il y a trop de div?

<body>
<div id = "header"
    <div id = "drapeau_1">
    </div>
    <div id = "drapeau_2">
    </div>
    <div id = "message">
    </div>
    <div id = "contact">
    <p><a href="#">contact</a></p>
    </div>
</div>
</body>

Merci!
Modifié par Arrmani (12 Sep 2008 - 00:00)

Arrmani a écrit :
Comment font les pro (...).

Désolée, ça m'a fait rire...

Pour répondre à la question : tout dépend de leur positionnement dans le header :
- s'agit-il de 4 éléments de liste ?
- sont-ils répartis sur le header ?
- sont-ils positionnés de part et d'autre de ce dernier ?

La réponse influencera forcément le code généré.
Ceci dit, le code proposé ne me semble pas approprié : l'utilisation de balises vides de sens n'est pas des plus heureuses.

Merci pour votre réponse.

Tous les éléments cités plus haut seront répartis sur le header rectangulaire (600 x 140). Les drapeaux en haut à gauche et le message sera placé au milieu. Quant au lien "contact" il sera placé en bas à droite du header. Faut-il positionner les éléments en tant que les enfants du header ou bien indépendamment?

Bonjour Arrmani,

Cet article pourra sans doute te donner quelques infos interessantes

Cdt,
Sylvain

Merci pour l'article. Je l'ai lu. Mais je me demande toujours
1. Comment introduire les éléments qui seront positionnés sur un autre, en l'occurrence sur le header. Dois-je les traiter comme les enfants du parent (header) ou je les positionne en tant que les éléments indépendants?
2. Si les éléments positionnés sont les enfants à l'aide du quel balise je les introduits dans le code HTML (je mets un div)? Si les éléments positionnés sont indépendants du header je les introduits comment (aussi un div)?

Merci

Les éléments sont à introduire en fonction de leur caractéristiques.
Par exemple, on utilisera un <p> pour un paragraphe et un <ul> pour une liste simple non-numérotée.
On évitera par exemple l'utilisation excessive de <div> vides de sens.

Dans ton cas, il s'agit de déterminer les caractéristiques de tes éléments. Nous avons :
- deux drapeaux
On peut englober cela soit dans une liste (car il s'agit d'une liste de choix de langue) soit dans un paragraphe (car il s'agit simplement de deux options en corrélation entre-elles).

- un message
Quoi de mieux qu'un paragraphe pour le contenir ou un blockquote, s'il s'agit d'une citation ?

- un lien contact
Une simple balise <a> peut convenir ou, si tu préfère, l'emploi d'un <span> (l'équivalent des <div> pour les éléments inline) peut-être également faire l'affaire...

Est-ce plus clair pour toi ?

Cygnus a écrit :
Les éléments sont à introduire en fonction de leur caractéristiques.
Par exemple, on utilisera un <p> pour un paragraphe et un <ul> pour une liste simple non-numérotée.
On évitera par exemple l'utilisation excessive de <div> vides de sens.

Dans ton cas, il s'agit de déterminer les caractéristiques de tes éléments. Nous avons :
- deux drapeaux
On peut englober cela soit dans une liste (car il s'agit d'une liste de choix de langue) soit dans un paragraphe (car il s'agit simplement de deux options en corrélation entre-elles).

- un message
Quoi de mieux qu'un paragraphe pour le contenir ou un blockquote, s'il s'agit d'une citation ?

- un lien contact
Une simple balise <a> peut convenir ou, si tu préfère, l'emploi d'un <span> (l'équivalent des <div> pour les éléments inline) peut-être également faire l'affaire...

Est-ce plus clair pour toi ?

Merci Cygnus. Oui c'est maintenant clair. Juste la dernière question. Par exemple j'introduis la phrase dans le HTML avec <p>. Je veux la positionner au milieur de mon header. Je dois l'annoncer dans le CSS en tant que l'enfant du headrer?

#header {
           background-image: image.png;
           background-repeat: no repeat;
           margin:auto;
           width: 700px;
           }
#header p {
          position:relative;
          top:20px;
          left: 15px;
           }

Merci

Arrmani a écrit :
Merci Cygnus. Oui c'est maintenant clair. Juste la dernière question. Par exemple j'introduis la phrase dans le HTML avec <p>. Je veux la positionner au milieur de mon header. Je dois l'annoncer dans le CSS en tant que l'enfant du headrer?

Par exemple oui.
La seule chose c'est que cela s'appliquera à tous les paragraphes contenus dans ton header.
Attention donc, si tu en as plusieurs.

Tu également centrer le text à l'intérieur de ton paragraphe via l'instruction text-align : center ou centrer ton paragraphe au moyen de ses marges latérales.

Dernière petite chose : si tu comptes positionner ton paragraphe via la propriété position, n'oublie pas de positionner ton header, car sinon, tu n'obtiendras pas l'effet escompté.

Cygnus a écrit :

Par exemple oui.
La seule chose c'est que cela s'appliquera à tous les paragraphes contenus dans ton header.
Attention donc, si tu en as plusieurs.

Tu également centrer le text à l'intérieur de ton paragraphe via l'instruction text-align : center ou centrer ton paragraphe au moyen de ses marges latérales.

Dernière petite chose : si tu comptes positionner ton paragraphe via la propriété position, n'oublie pas de positionner ton header, car sinon, tu n'obtiendras pas l'effet escompté.

Merci pour tes conseils précieux

Arrmani a écrit :
Merci pour tes conseils précieux

Le sujet est donc à considérer comme [Résolu] ?

Cygnus a écrit :

Le sujet est donc à considérer comme [Résolu] ?

Pas tout à fait
Dans mon 1er message j'ai également indiqué que mon footer touche le bord du FF ce qui n'est pas le cas sous IE, même si j'indique dans le CSS du footer

#foooter {
margin-bottom:-1%;
}

Auriez-vous une idée comment faire en sorte que footer touche le bord de l'IE?
Merci

N.B. Les screens sont dans le 1er message