28173 sujets

CSS et mise en forme, CSS3

Vertical-align bottom ou baseline (firefox vs IE)

Bonjour,

J'ai un souci avec la propriété vertical-align dont je me sers pour aligner des images avec du texte.

J'ai un div (nommé tab) dans lequel j'affiche une icône et du texte sur une seule ligne. Cette icône possède la propriété vertical-align: bottom. Le rendu est bon sous Firefox mais sous IE6 (je n'ai pas la version 7), j'obtiens un décalage de tout le div vers le bas.

Vous pouvez voir le problème ici : http://www.marie-osteo.com/test/

Un extrait du code HTML : 


<div id="tab">
  <img src="img/nav.png" alt="Navigation" class="icon16"/>&nbsp;Vous êtes ici : Accueil
</div> <!-- #tab -->


Et le CSS : 



#tab {
  background-color: #003300;
  font-family: Verdana, sans-serif;
  font-size: 0.8em;  
  color: #FFFFFF;
}

.icon16 {
  width: 16px;
  height: 16px;
  border: 0;
  vertical-align: bottom;
}


Sous IE, il faut que je passe la valeur vertical-align à baseline pour que l'affichage soit bon mais je vous avouerai que je ne comprends pas du tout pourquoi. Auriez-vous une explication ?

Chose bizarre également, c'est que j'ai un div (nommé menu) juste dessous qui est en float: right. Quand je passe ce div (dans le code HTML) avant le div tab, le décalage n'apparaît plus. Idem si vous vous avez une explication à ce comportement, elle est la bienvenue.

Merci
Bonjour,
Ajouter le provogue XML avant le doctype fais basculer IE6 et IE7 en mode quirks,
ce qui peut être la source de tes divergences d'affichage.
Supprimer donc le prologue qui n'est dans ton cas pas utile.
Voir la FAQ à ce propos.
Modifié par Hermann (20 May 2007 - 04:03)
Bonjour,
comme le fait remarqué Thomas cela peut provenir d'un espace
supplémentaire sous l'image quand celle-ci n'a pas d'alignement vertical
de spécifié (vertical-align: baseline > valeur par default).
Celui-ci peut disparaitre sous Firefox avec un doctype XHTML transitionnal
mais dans ton cas de figure (aligner une image et du texte verticalement
dans un conteneur), les divergences de rendu sont parfois bien plus compliquées à corrigées dans la pratique.

Donc pour faire au plus simple, je te conseillerais de mettre ton image en
float:left (les flottants font passer la valeur calculée du display à block de
manière transparente) et de centrer texte et image verticalement avec des
padding verticaux appliqués au div tab (le line-height n'ayant aucune effet
sur les éléments inline remplacés (img, input, select..)

Tu as une différence de luminosité de ton png vert de fond dû au gamma
du PNG. Pour avoir un résultat identique sur IE et les autres navigateurs,
tu dois utiliser PngOUT (suppresion du gamma et optimisation)
Modifié par Hermann (20 May 2007 - 15:37)
Bonjour,

Je suis allé voir le lien donné par Thomas mais après des heures et des heures passées à modifier le code, impossible d'avoir un résultat probant. J'ai également essayé la solution d'Hermann mais ça me paraît trop compliqué pour aligner des images.

Du coup, comme j'arrivais pas à m'en sortir simplement, et comme le site en est encore à ses débuts, j'ai recommencé le codage en faisant bien attention, à chaque élément ajouté, de voir l'impact sur le reste de l'affichage, sous FF et IE.

Je ne vois pas de différence fondamentale avec ce que j'avais avant mais là ça marche, je n'ai plus ce souci. J'imagine que le problème était juste dû à un (ou plusieurs ?) élément dont IE n'aimait pas la disposition, mais je n'ai pas réussi à identifier lequel.

Honnêtement, y a vraiment des trucs qui m'échappent entre les navigateurs... Mais bon, ça marche correctement maintenant. Merci pour vos explications.
PatHibulaire a écrit :

Honnêtement, y a vraiment des trucs qui m'échappent entre les navigateurs... Mais bon, ça marche correctement maintenant. Merci pour vos explications.

Oui mais rassures toi, il n'y a pas qu'à toi que ça le fait.
Il y a toujours des décalages, aussi infimes soient-ils. Smiley cligne
Modifié par Hermann (01 Jul 2007 - 17:53)
Sujet clos
Aller à