Margin top bug entre IE et Firefox

Bonjour à tous !

J'ai un petit problème d'affichage de contenu entre Firefox et IE.
Je m'explique, voici le code pour afficher les deux tableaux :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

.CV1 { margin-top:-215px; margin-left:550px; font-size:11px; }   .CV2 { margin-top: -94px; margin-left:550px; font-size:11px; }

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<table class="CV1" height=100> <tr> <td align=center width=260> <span style="font-size: 14px;">rolk24 (F 25 ans)</span> </td> </tr> <tr height=88 valign=middle> <td> Bonjour, originaire de dordogne, je me<br/> suis évadée quelques années pour mes<br/> études! Je viens de revenir dans la<br/> région et je cherche à faire des<br/> rencontres amicales en premier lieu et<br/> plus si affinité... </td> </tr> </table>   <table class="CV2" height=100> <tr> <td align=center width=260> <span style="font-size: 14px;">zac360 (H 25 ans)</span> </td> </tr> <tr height=88 valign=middle> <td> cool et sympatique je cherche à faire des<br/> rencontres amicales et peut êtres une<br/> rencontre amoureuse si affinité. à<br/> bientôt j'espère avoir des contacts!. </td> </tr> </table>

---

Et enfin voici deux imprim' écran de ce que j'obtiens pour chaque navigateurs :

Firefox :
http://i81.servimg.com/u/f81/11/31/25/01/bug-af10.jpg

IE :
http://i81.servimg.com/u/f81/11/31/25/01/bug-af11.jpg


le fond (le cadre violet, etc.) c'est un background-image sur lequel j'ai fait pas mal de positionnement d'autre éléments (avec aussi des margin-top et margin-left).

Merci d'avance !

Il y a du boulot :aie:

Commence par mettre TOUT les paramètres de tes attributs entre guillemets et de spécifier une unité quand c'est nécessaire :

Code:

---

height="100px"

---

Quand bien même,

Code:

---

<span style="font-size: 14px;">rolk24 (F 25 ans)</span>

---

Il faudrait plutôt appliquer une class à ton span, par exemple

Code:

---

<span class="info">rolk24 (F 25 ans)</span>

---

et de mettre dans ton CSS :

Code:

---

1 2 3

.info { font-size: 14px; }

---

D'autre part

Code:

---

1 2 3

<table class="CV1" height=100> [...] <td align=center width=260>

---

La balise table n'accepte pas les attributs width et height, c'est de la mise en forme, donc il faut le faire dans le CSS.

Code:

---

1 2 3 4 5 6

/* Donner à tous les tableaux une hauteur de 88px et une largeur de 260px */ table { height: 88px; width: 260px; }

---

Mais même là je dois, critiquer, on ne doit pas utiliser les tableaux pour mettre en forme. On utilise les tableaux pour... faire des tableaux :mrgreen:

D'autre part, il faut utiliser les class quand on compte réutiliser ces propriétés plusieurs fois. Pour une propriété CSS qui ne sera utilisée qu'une seule fois, c'est avec un id qu'il faut le faire.

Je te conseille l'utilisation de blocks et de lignes (DIV et SPAN) pour mettre en forme ta page, lié à l'utilisation d'une feuille de style pour le mise en page.

Même en respectant les règles d'écriture, on peut rencontrer des différences d'affichage d'un navigateur à l'autre :roll:
Donc, ne le prend pas mal, mais il serait bien de se mettre au gout du jour pour ce qui est des langages WEB ;)

Je te conseille vivement de réviser les cours HTML ou xHTML ainsi que CSS

Une fois que tu sera à jour là dessus, tu pourras utiliser les validateurs de code du W3C pour vérifier si ton code est conforme/

J'ai pris note de tes conseilles ;-)

En fait je reprends le travail d'un collègue qui est plutôt vieux de la vieille, qui code en html un peu comme il veut ^^
Parce que tout le reste de mon code est fabriqué avec des "div" et des "span"
Mais il faut bien avouer que les tableaux sont efficaces pour aligner du contenu verticalement, horizontalement...

Vu qu'il y'avait un tableau dans le code que j'ai récupéré, je l'avais gardé, puis ça marchait très bien sous Firefox :D

J'ai donc appliqué ce que tu m'as suggéré et ça marche nickel, j'ai juste 3px de différence entre Firefox et IE, Firefox affiche un peu plus haut que IE (je ne sais pas pourquoi).
Je te remercie pour tes conseils qui m'ont été d'une grande utilité !

La différence entre IE et FF peut venir de leur gestion différente des propriétés CSS margin et padding (tout dépend de la version de IE :roll:)

La solution qui est loin d'être parfaite mais qui revient souvent consiste en l'initialisation des valeurs de margin et padding :

Code:

---

1 2 3 4

html * { padding: 0; margin: 0; }

---

J'ai fait ce que tu m'as dit, ça a changé beaucoup de chose, mais après correction, j'ai toujours 3px de différence d'affichage entre IE et Firefox.

Mais je crois que c'est dû à la hauteur de certain select.
Vu que ceux de Firefox sont plus gros ça décale tout, et je perds des pixels sous Firefox avec les select.
mais bon pour 3px, l'affichage reste correct.