28220 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Sur mon site, j'utilise une puce (tirée d'un thème de DotClear) pour précèder des détails sous le titre de la dernière actualité. Pour cela, voici le code que j'emploie :

<img src="flecheverte.gif" width="13" height="13" align="middle" alt="" />
<em>Par Joffrey, le 12/09/2005 (22:14:25)</em>


Il est vrai que son nom est un peu bizarre pour une flèche pas du tout verte, mais là n'est pas la question. En effet, l'affichage est nickel, que ce soit sous Firefox comme Internet Explorer... sauf Safari, sur lequel j'obtiens ceci :

http://img53.imageshack.us/img53/2595/probleme9rh.jpg

Comme vous pouvez le constater, la petite flèche à côté de "Par Joffrey [...]" est mal alignée verticalement. En HTML 4.01 j'utilisais "absmiddle" et il ne me semble pas qu'il y avait ce problème, mais ce n'est plus possible maintenant que je suis en XHTML 1.0 Transitional.

Quelqu'un aurait une idée de mon erreur ?
Comment résoudre ce problème d'affichage ?

Merci d'avance,
Joffrey.


EDIT: edition du code, ça déformait le style du forum.
Modifié par pickupjojo (18 Sep 2005 - 01:07)
Stephan a écrit :
Tu devrais lire ce topic : Absmiddle en XHTML.

Tu y trouveras sans doute ton profit Smiley cligne

A vrai dire je cherchais surtout la raison pour laquelle ça ne marche pas correctement avec Safari. En faisant de la sorte ça marche plutôt bien :

// Dans la page
<img src="flecheverte.gif" width="13" height="13" class="middle" alt="" />

// Dans la CSS

.middle {
	vertical-align: middle;
}


Par contre je me demande si c'est vraiment valide (malgré que le validateur du W3C ne bronche pas). Smiley confused