affichage firefox

[arnob]

Bonjour,

j'ai un problème avec le footer de mon site sous firefox. Ce footer s'affiche bien avec IE.

Svp, regardez mon site avec les 2 navigateurs, www.arnauld.fr

<div id="pied"><li><img src="envelope_ver1.gif" width="11" height="10" border="0">
<a href="http://www.arnauld.fr/contact.php" target="liens">
mail arnauld<a href="http://www.arnauld.fr/contact.php" target="liens"></a></li>


<span style="font-size:8pt;">     </span> <a href="http://www.arnauld.fr/radioblog/index.php" onclick="window.open(this.href, '_blank', 'resizable=0, location=0, toolbar=0, scrollbars=0, height=300, width=222'); return false;" title=""><span style="font-size:8pt;">radio arnauld</span></a>     

<img src="yahoo.gif" border="0" align="bottom">  <a href="http://fr.groups.yahoo.com/group/francechine/join" onclick="window.open(this.href, '_blank'); return false;" title="">francechine yahoo</a>
</div>

et la css

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;

}


#conteneur {
position: absolute;
width: 775px;
left: 59%;
margin-left: -480px;
margin-top: 10px;

}
#header {
height: 200px;
background-image: url('imagetop.jpg');
width: 775px;
height: 202px;
border-top: 3px solid #989898;
}





#pied {
width: 775px;
list-style-type: none;
text-align: left;
background-color: #FFFFFF;
height: 10px;
margin: 0px 0 3px 0;
margin-top: 0px;
}

merci de vos conseils car je ne vois as la solution...

Modifié 3 Août 2005 par arnob

[Xavier]

Le problème vient (comme d'habitude) d'IE . Tu as fixé la hauteur de #footer à 10px. Clairement, dans IE, ça fait plus de 10px, alors que Firefox l'affiche bien avec une hauteur de 10px (j'ai pas pris une règle pour vérifier, mais ça me semble assez clair, il est plus grand que ton image "RSS" qui fait déjà 14px !).

Il faut savoir que IE (même si on voit parfois un "OK" dans les tables de support, ce qui est complètement faux) interprète très mal les hauteurs/largeurs et prend beaucoup de libertés. En fait, il les interprète comme des min-height.

Conseil : développe dans un navigateur respectueux des standards (Firefox, Opera, Safari), puis ensuite seulement adapte pour que ça passe dans IE. Tu évitera ce genre de petits ennuis

PS : mets 1em; comme hauteur, ça devrait aller mieux, et en plus ça s'adaptera si les gens choisissent d'agrandir le texte

Modifié 3 Août 2005 par Xavier

[arnob]

ok, merci beaucoup, je fais ça et je repasse par ici si j'ai des souçis.

Bonne journée !

[arnob]

merci, maintenant ça marche. Mais j'ai un autre problème.

Toujours dans le footer, le premier élément qui est un<li> n'est pas en ligne avec les autres liens qui eux ouvrent d'autres fenêtres ou pop up.

Je pourrai c'est sur faire en sorte que le premier élément ne soit pas un <li> et alors tout serait réglé. Mais je voudrais garder le footer tel que.

Je suppose qu'en CSS il doit y avoir une solution, mais laquelle ?

[Xavier]

1. Valider (la CSS aussi !), pas étonnant qu'un code bourré d'erreurs comme ça ne s'affiche pas correctement
   
2. Mettre tous tes <li> dans un <ul> ou un <ol> - ou alors ne pas en mettre du tout
   
3. Leur appliquer display:inline pour qu'ils s'affichent en ligne.
   

Là, c'est typiquement une interprétation différente d'une erreur selon les navigateurs, IE semblant ignorer le <li> et Mozilla essayer d'afficher malgré tout ce li orphelin comme un bloc (Opera est un intermédiaire, le pied est sur 2 lignes mais agrandi comme dans IE ) bref, pas étonnant qu'avec toutes ces erreurs il y ait des problèmes un peu partout.

Faire des erreurs de code, c'est avoir la certitude que quelque chose ne va pas fonctionner correctement quelque part - tu en as la démonstration.

Validez, validez, validez, et travaillez avec des outils stricts, on ne le répètera jamais assez.

Ah, au passage tu peux supprimer 11 des 12 appels à la feuille "style.css", un seul suffit

Et aussi, visiblement la hauteur de #footer est toujours à 10px, tu devrais mettre en ligne la correction