Bonjour à tous.
J'ai un problème de décalage sous firefox entre le background du body et du content.
Le background du content est décalé d'un pixel vers la droite alors que cela ne devrait pas l'être.
bg.jpg est une image faisant une taille de 1918*1200 et comportant parfaitement au centre le haut du contenu de mon site et qui fait 786 px;
Mon image est comme ceci.
566px 786px 566px
<----><------------><----->
bg-content.jpg est donc le fond du contenu et qui correspond donc au 786px de bg.jpg
Ce problème n'existe pas sous IE8,7,6 et safari par exemple.
Voici le code xhtml et le css ci-dessous
Et son css associé.
Merci
Modifié par marseille (24 May 2009 - 20:11)
J'ai un problème de décalage sous firefox entre le background du body et du content.
Le background du content est décalé d'un pixel vers la droite alors que cela ne devrait pas l'être.
bg.jpg est une image faisant une taille de 1918*1200 et comportant parfaitement au centre le haut du contenu de mon site et qui fait 786 px;
Mon image est comme ceci.
566px 786px 566px
<----><------------><----->
bg-content.jpg est donc le fond du contenu et qui correspond donc au 786px de bg.jpg
Ce problème n'existe pas sous IE8,7,6 et safari par exemple.
Voici le code xhtml et le css ci-dessous
<div id="wrapper">
<div id="header">
</div><!--<div id="header">-->
<div id="content">
<p>sdfgsdgf </p>
<p>sdg</p>
<p>sd</p>
<p>gs</p>
<p>dgf</p>
<p>sd</p>
<p>gs</p>
<p>dfg</p>
</div>
<!--<div id="content">-->
<div id="footer">FOOTER</div><!--<div id="footer">-->
</div><!--<div id="wrapper">--
Et son css associé.
body{
background-image:url(../images/bg.jpg) ;
background-position:center top;
background-repeat:no-repeat;
color:#FFF;
}
#wrapper{
margin:0 auto;
width:786px;
}
#header{
height:282px;
}
#content{
padding:10px;
clear:both;
display:block;
min-height:800px;
height:auto !important;
height:800px; /*hack permettant d'appliquer un min-height por ie6*/
background: url(../images/bg-content.jpg) repeat-y center top;
}
#content-left{
float:left;
width:422px;
}
#content-right{
float:right;
width:344px;
}
#footer{
background: url(../images/footer.jpg) no-repeat center top;
height:33px;
}
Merci
Modifié par marseille (24 May 2009 - 20:11)