[HTML] différence Firefox - IE

Bonjour

Oui, cette question est un classique, j'en suis sûr !
J'ai développé tout un site avec J2EE. Ne fuyez pas, je ne parlerais que de la aprtie HTML/CSS.
J'ai écrit ce site et testé sous Fedora Core 3 avec Firefox 1.0.8 et même lynx 2.8.5 (navigateur web en mode shell) et TOUT passe bien.
Excepté sous IE ! ben oui, sinon, ce ne serait pas marrant !
Par exemple, j'ai un div avec le code HTML suivant :

Code:

---

1 2 3 4 5 6

<div class="submitpanel"> <table align="center"> <tr><td class="leftb"><input type="submit" value="Submit"></td><td class="rightb"><input type="reset" value="Reset"></td></tr> </table> </div>

---

Et voici le CSS :

Code:

---

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

.submitpanel{ border: 1px solid orange; font-size: 100%; font-family: Arial, Helvetica, Geneva, sans-serif; background-color: #D7FFAC; margin-top: 5px; margin-bottom: 5px; margin-left: 30%; margin-right: 30%; padding-top: 5px; padding-bottom: 5px; }

---

Expliquez moi pourquoi sous Firefox, tout est bien centré alors que sous IE, mon div part complètement à droite.

Merci d'avance de vos réponses.

@++

Bon apparemment, IE n'apprécie pas tellement l'attribut width d'une table.
Autre élément, valider complètement mon site par le W3C ;)

@++

Salut,

A mon avis IE n'est pas capable de centrer ton tableau parce qu'il n'y a
pas de largeur explicitement définie pour le div.

La largeur du div est de 40% de celle de la fenêtre, mais IE ne comprend pas.
Si tu remplace

margin-left: 30%;
margin-right: 30%;

Par

width: 40%;
margin: 0 auto;

Tu obtiens le même résultat sur les deux navigateurs.

l'abréviation margin: 0 auto; signifie, marge hautes et basses à zéro,
et marges gauches et droites automatiques (d'où l'effet de centrage
si le div à une largeure définie et qu'il est en display: block)

Voilà pour le bug, mais je pense que tu pourrais simplifier ton code
ainsi:

Code:

---

1 2 3 4 5

<div class="submitpanel" > <input style='float: right;' type="reset" value="Reset"> <input type="submit" value="Submit"> </div>

---

Ce qui éloigne les boutons submit et reset et évite que les visiteurs
se "rattent" en cliquant reset au moment de l'envoi :)