28220 sujets

CSS et mise en forme, CSS3

Divergence de 2pixels entre IE et Firefox

Bonjour a tous,

J'ai un ennui avec IE que je n'arrive pas resoudre. J'ai un décalage de 2 pixels entre mon "content" et mon flottant a gauche. C'est assez génant pour l'alignement de mes images de fond.....
Lorsque je précise le width a la bonne longeur sur mon conteneur, IE me dégage le div en dessous et lorsque je précise par le width j'ai 2 pixels de décalage

PS: vous pouvez reprendre le source de la page, et le modifier en essayant de trouver une soluce Smiley langue . Merci

Voici le test que vous pouvez faire ici entre un IE6 et Firefox

http://www.mvsolutions.fr/indexDream.html

et voici le code de la page avec le CSS inline :


  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <style type="text/css" >
	
body
{ 
	/*font:small/1.6em Verdana,Sans-serif; */
	font-family: Arial, 'Lucida Sans';
	font-size: 12px;
}

/* *{margin:0;padding:0;} */ 

#container
{
	background-image: url("http://www.mvsolutions.fr/Images2/fond.jpg"); 
	background-repeat:repeat-y;
	position:absolute;
	left: 50%; 
	width : 780px;
	margin-left: -380px;
}


#footer
{
    color: white;
    background-color: #2F73B3;
    text-align: left;
    padding-right: 0.5em;
    padding-left: 0.5em;
    padding-bottom: 0em;
    padding-top: 0em;
    clear : both;
}

#left
{
   	float:left; 
	width:209px;
	margin:0em;
	padding:0em;
}

#content
{
	width: 571px; 
	background: transparent url("http://www.mvsolutions.fr/Images2/bordureinfo.jpg") top left no-repeat; 
    height:520px;
	margin-left: 209px; 
	border-width: 0px;
	padding: 0px 0px 0px 0px;
	z-index: 1;
}

#headerleft {
	background-image: url("http://www.mvsolutions.fr/Images2/headerleft.jpg");
	background-repeat: no-repeat; 
	height: 10px;
}

</style>
	


</head>
<body>

<div id="container">
<div id="left">
   <div id="headerleft"></div> 
    <p>sdsdsdsdsdsdsds s dsd sd sd s s s s ds ds ds ds ds ds s ds d</p>
    <p>erererer</p>
    <p>ererer</p>
    <p>erere</p>
    <p>r<br />
    </p>
</div>

<div id="content">

  	zezezezezezezezeze
	zezeze
	zezezeze  </div>
<div id="footer">Copyright 2006</div>
</div>

</body>
</html>

Modifié par EricHallier (21 Jun 2006 - 19:37)
il s'agit du fameux " 3 pixels jog ".
Pour le resoudre mettre ton div en absolute ou mettre un autre div a l'interieur avec la meme image de fond et proprietes :
position: relative;
left: -3px;
margin-right: -3px;
Ok merci jp94, j'ai modifié la page pour différencier le navigateur.
Voici la version modifiée :



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <style type="text/css" >
	
body
{ 
	/*font:small/1.6em Verdana,Sans-serif; */
	font-family: Arial, 'Lucida Sans';
	font-size: 12px;
}

#container
{
	background-image: url("http://www.mvsolutions.fr/Images2/fond.jpg"); 
	background-repeat:repeat-y;
	position:absolute;
	left: 50%; 
	width : 780px;
	margin-left: -380px;
}


#footer
{
    color: white;
    background-color: #2F73B3;
    text-align: left;
    padding-right: 0.5em;
    padding-left: 0.5em;
    padding-bottom: 0em;
    padding-top: 0em;
    clear : both;
}

#left
{
   	float:left; 
	width:209px;
	margin:0em;
	padding:0em;
}



#content
{

	margin-left: 209px; 
	border-width: 0px;
	padding: 0px 0px 0px 0px;
}

#content2
{
	background: transparent url("http://www.mvsolutions.fr/Images2/bordureinfo.jpg") top left no-repeat; 
      height:520px;

}


* html #content2
{
	position: relative;
	left : -3px;
	margin-right: -3px;
	
	background: transparent url("http://www.mvsolutions.fr/Images2/bordureinfo.jpg") top left no-repeat; 
}


#headerleft {
	background-image: url("http://www.mvsolutions.fr/Images2/headerleft.jpg");
	background-repeat: no-repeat; 
	height: 10px;
}

</style>
	


</head>
<body>

<div id="container">
<div id="left">
   <div id="headerleft"></div> 
    <p>sdsdsdsdsdsdsds s dsd sd sd s s s s ds ds ds ds ds ds s ds ds sd s ds s s ds s ds sdssdsd s dsd sdsds dssds d ssdsds sd sd sd ds sd s dsd sd&nbsp;&nbsp;        </p>
    <p>erererer</p>
    <p>ererer</p>
    <p>erere</p>
    <p>r<br />
    </p>
</div>

<div id="content">
	<div id="content2">	
  	zezezezezezezezeze
	zezeze
	zezezeze  
	</div>
</div>
<div id="footer">Copyright 2006</div>
</div>

</body>
</html>

Modifié par EricHallier (22 Jun 2006 - 11:00)
Sujet clos
Aller à