Discussion :

[GLDavid]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

@++

[GLDavid]

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

@++

[marcha]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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