Discussion :

[lodan]

Bonjour,

J'ai des boutons de validation défini en CSS comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* Les boutons */
.button {
	background: #ffffcc url("images/fond_menu_off.gif") repeat-x;
	font: bold 0.9em Verdana;
	color: #333300;
	height: 15px;
	text-align:center;
	border-top: 1px solid #cccc99;
	border-right: 1px solid #cccc99;
	border-bottom: 1px solid #cccc99;
	border-left: 1px solid #cccc99;
	padding:2px 13px 20px 15px;
}
 
input.button:hover {
	background: #333300 url("images/fond_menu_on.gif") repeat-x top left;
	color: #ffffcc;
}

Dans mon html, j'utilise :

Code :

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

1
2
3
4
5
<div style="margin-top:2px;">
<input type="submit" name="Effacer" onclick="document.getElementById('formulaire').reset()"
value="Effacer" class="button">
<input type="submit" name="Envoyer" onclick='valider;' value="Envoyer" class="button">
</div>

Sous firefox les boutons sont cote à cote, sous IE ils sont l'un en desous de l'autre avec chevauchement.

Cela provient du CSS ou plus du code HTML ?
J'ai l'impression que les boutons sont plus larges sous IE que sous firefox, ce qui expliquerait le chevahchement par rapport à la place disponible.

Merci d'avance.

[blueice]

Essaye comme ca :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
.button {
    background: #FFC url("images/fond_menu_off.gif") repeat-x;
    font: bold 0.9em Verdana;
    color: #333300;
    height: 15px;
    text-align:center;
    border: 1px solid #cccc99;
    padding:2px 13px 20px 15px;
    float:left;
    margin:2px;
}

et vire la div superflue du code html...

[lodan]

Merci,

J'ai fait comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* Les boutons */
.button {
	background: #ffffcc url("images/fond_menu_off.gif") repeat-x;
	font: bold 0.9em Verdana;
	color: #333300;
	height: 20px;
	text-align:center;
	border: 1px solid #cccc99;
	padding:2px 10px 20px 1px;
	margin-top:2px;
}
 
input.button:hover {
	background: #333300 url("images/fond_menu_on.gif") repeat-x top left;
	color: #ffffcc;
}

J'ai vu que tu avais changé le code de la couleur cela à une importance ?

Sous IE le hover ne fonctionne pas.

Le texte dans les boutons n'est plus centré.