[Résolu]Problème de mise en page de boutons

Bonjour,

J'ai un petit souci avec l'affichage d'un bouton entre IE6 et Mozilla, j'ai déclaré un bouton avec ce code :

.boutons{
background-color:#993333;
border:medium double #993333;
border-width:6px;
color:#FFFFFF;
font-weight:bold;
font-size:9px;
font-family:Arial, Helvetica, sans-serif;
}

Sous IE6 j'ai pas de problème mon bouton est bien affiché avec une bordure rouge et une blanche mais sous Mozilla, mon bouton n'a pas la mise en page que je lui ai donné, il apparait tout rouge sans la double bordure qui me permet d'avoir une bordure blanche.

Est ce que quelqu'un aurait un tuyau ?

Il y aurait-il un site qui traite des problème d'affichage entre IE et Mozilla, car le problème que j'ai avec le bouton je l'ais eu sur d'autre partie de mon site, comme des div.

Merci d'avance !
Modifié par murrigane (12 May 2006 - 15:22)

Bonjour murrigane !

Voici ce que tu cherches à faire :


Le problème vient de l'interprêtation de la valeur double, différente sous Firefox et IE.

Pour une bordure de type "double", MSIE considère (apparemment) que la bordure de 6px est en fait une bordure externe de 3px de la couleur spécifiée + un espacement (épaisseur : moitié de la bordure).

Pour Firefox, la valeur "double" est appliquée différemment : un espacement (épaisseur : moitié de la bordure) est appliqué AVANT le rendu de la bordure. La bordure est, en quelque sorte, interne. C'est bizarre, je sais, mais c'est comme ça

La solution : un hack !

.boutons /* comportement pour MSIE */
{
	background-color: #993333;
	border: 6px double #993333;
	color:#FFFFFF;
	font-weight:bold;
	font-size:9px;
	font-family:Arial, Helvetica, sans-serif;
}

html>body .boutons  /* comportement pour les autres */
{
	border: 6px double #fff;
}

Après, à savoir si c'est Firefox/Safari/Opera ou MSIE qui a raison, c'est une autre histoire ... sous Safari et Firefox, en tout cas, c'est le même procédé d'après ce que j'ai remarqué ... MSIE a peut-être encore mal analysé

Enfin ... J'espère t'avoir aidé
Modifié par Ladytron (05 May 2006 - 11:17)

Bonjour Ladytron !

Merci beaucoup d'être venue te pencher sur mon cas ! Je débute en feuille de style et je maîtrise vraiment partiellement la mise en page par CSS.

Je vais tester ce que tu m'as donnée, je pense avoir compris le schmilblick.

Je te redis ce que cela donne

Encore merci

murrigane a écrit :
Merci beaucoup d'être venue te pencher sur mon cas

C'est gentil de me croire "fille", mais j'ai les attributs masculins

Oups mille excuses.... j'ai pas fait gaffe en écrivant mon message !

Eeeeuuuh petite question, j'ai a peu près tout saisie mais par contre je vois pas comment tu déclare ton

a écrit :

html>body .boutons /* comportement pour les autres */

{

border: 6px double #fff;

}

??

Tu places comment dans la feuille de style ?

je sens que la journée va être plus longue que prévue ....
Modifié par murrigane (05 May 2006 - 12:01)

En copiant/collant impérativement en-dessous de la règle .boutons, comme je l'ai écrit :

.boutons /* comportement pour MSIE */
{
	background-color: #993333;
	border: 6px double #993333;
        color:#FFFFFF;
	font-weight:bold;
	font-size:9px;
	font-family:Arial, Helvetica, sans-serif;
}

html>body .boutons  /* comportement pour les autres */
{
	border: 6px double #fff;
}

Il n'y a qu'à copier/coller

Le principe de ce "hack" réside dans le fait que MSIE a de nombreuses lacunes en CSS2.
Entre autres, il ne comprend pas l'opérateur >, qui est utilisé pour dire "fils de" (html>body se lit comme "body est fils de html"), puisqu'au final un document web n'est qu'une arborescence.

En fait, quand les navigateurs vont lire la première règle (.boutons), ils vont l'appliquer.
Ils vont ensuite trouver la règle html>body .boutons ("classe boutons située dans l'élément body fils de html").
Ceux qui savent interprêter cette expression vont appliquer les diverses instructions contenue dans la règle. Ceux qui ne savent pas l'interprêter vont simplement la passer sans l'appliquer.

Safari et Firefox savent interprêter cette expression, et vont donc appliquer la règle. MSIE ne sait pas l'interprêter, et va donc passer à la règle suivante.
Modifié par Ladytron (05 May 2006 - 17:56)

Aaaahhh oui d'accord !

Je ne savais pas que l'on pouvais déclarer du code de cette façon dans une css !

Ben merci beaucoup en tout cas,

ton aide m'a été précieuse.

De rien, ça me fait plaisir

Moi aussi ça m'a bien aidé, je débute en css alors ce genre d'explication est toujours utile ^^'
Modifié par stefhan (05 May 2006 - 18:49)