28173 sujets

CSS et mise en forme, CSS3

[Résolu] Problème sous IE , encore ...

Voila , je suis tout nouveau ici , je developpe actuelement un site pour un terrain de VTT dirt, j'aimerai le faire valide, donc CSS/Xhtml !

Voila mon problème :

Firefox afiche le site correctement comme cela :

http://img132.imageshack.us/img132/2463/temp5al.th.jpg


IE lui comme cela :

http://img364.imageshack.us/img364/9582/temp9vt.th.jpg


Mon code : 

<body>
<div id="global">
<div id="header">
</div>
<div id="menu_h_g">
</div>
<div id="menu_h_d">
</div>
<div id="menu_v_g">
test
test
<div id="contenu">
Contenu global
</div>
</div>
<div id="footer">
</div>
</div>
</body>


Et le CSS :

body {
     margin: auto; /* pour éviter les marges */
     text-align: center; /* pour corriger le bug de centrage IE */
     }

#global {
     margin-left: auto;
     margin-right: auto;
     width: 800;
     text-align: left; /* on rétablit l'alignement normal du texte */
     }

#header {
     background-image: url(../images/banniere.jpg);
     width: 800px;
     height: 123px;
     }

#menu_h_g {
     background-image: url(../images/menu_h_g.jpg);
     background-repeat: no-repeat;
     width: 154px;
     height: 35px;
     float:left;
     }

#menu_h_d {
     background-image: url(../images/menu_h_d.jpg);
     background-repeat: repeat-x;
     height: 35px;
     width: 646px;
     margin-left:154px;
     }

#menu_v_g {
     background-image: url(../images/menu_v_bg.jpg);
     background-repeat: repeat-y;
     width: 151px;
     float: left;
     }

#contenu {
     width: 649px;
     margin-left:151px;
     }

#footer {
     background-image: url(../images/footer_bg.jpg);
     width: 800px;
     height: 19px;
     clear:both;
     }


J'ai cherché je n'est pas trouvé Smiley sweatdrop , merci d'avance !

Ronan Smiley cligne
Modifié par Ronan (24 Mar 2006 - 10:06)
Essaye ça 


#menu_h_d {
	background-image: url(../images/menu_h_d.jpg);
	background-repeat: repeat-x;
	height: 35px;
	width: auto;
   }
Passage en force !!!


#menu_h_g {
	background-image: url(../images/menu_h_g.jpg);
	background-repeat: no-repeat;
	width: 154px;
	height: 35px;
	float:left;
    }
#menu_h_d {
	background-image: url(../images/menu_h_d.jpg);
	background-repeat: repeat-x;
	width: 646px;
	height: 35px;
	float:right;
   }
Bonsoir,

dans body, tu as 
width: 800;
Or il faut spécifier l'unité (px). Il n'y que pour une valeur nulle qu'on peut omettre l'unité.
Une fois fait, tu pourras supprimer le {width:800px;} qu'il y a sur header, idem par exemple pour {width: 646px;} sur #menu_h_d

Ensuite, concernant ton problème des 3px, tu peux corriger ce défaut d'IE par ce code mis en commentaire conditionnel : 
#menu_h_d {
	position: relative;
	left: -3px;
	margin-right: -3px;
}

Mais que comptes tu mettre dans cette div ? Si c'est du texte sur une ligne, tu peux alors simplement remplacer le height par un line-height de même valeur. Là plus de problème.
Autre solution possible : {float: right;} en spécifiant la largeur qu'il faut (comme vient de l'indiquer gege71 à l'instant), mais bon...
Modifié par Alan (23 Mar 2006 - 22:09)
Alan a écrit :
Bonsoir,

dans body, tu as 
width: 800;
Or il faut spécifier l'unité (px). Il n'y que pour une valeur nulle qu'on peut omettre l'unité.
Une fois fait, tu pourras supprimer le {width:800px;} qu'il y a sur header, idem par exemple pour {width: 646px;} sur #menu_h_d

Ensuite, concernant ton problème des 3px, tu peux corriger ce défaut d'IE par ce code mis en commentaire conditionnel : 
#menu_h_d {
	position: relative;
	left: -3px;
	margin-right: -3px;
}

Mais que comptes tu mettre dans cette div ? Si c'est du texte sur une ligne, tu peux alors simplement remplacer le height par un line-height de même valeur. Là plus de problème.
Autre solution possible : {float: right;} en spécifiant la largeur qu'il faut (comme vient de l'indiquer gege71 à l'instant), mais bon...



Merci j'ai corriger les qques fautes , mais comment utiliser les commentaires conditionnels avec le css , aurait tu un exemple concret ?
Smiley cligne
Sujet clos
Aller à