28173 sujets

CSS et mise en forme, CSS3

[résolu] Problème d'alignement IE

Bonjour.

Je rencontre un problème d'alignement entre IE et les autres navigateurs.
Ce problème est difficile à expliquer avec des mots, donc voici le site :
http://www.inconcevable.net

L'ombre qui se trouve sous le menu reactif est bien en phase avec l'ombre verticale à gauche du menu texte.
Sauf sous IE.
http://inconcevable.net/alsa/capture.png

On peut aussi noter sous IE qu'il y a une différence entre la marge à gauche du texte entre IE et FX par exemple. Je pense que c'est de là que vient le problème de décalage, mais malgré tous mes essais et recherches, je n'ai pas réussi à trouver la faille. Je suis sur que c'est un truc tout bête mais je sèche. Smiley bawling

Auriez vous une idée ?


Voici le code CSS :
#corps1 {
background: url(images/fond.png) top left;
padding: 0 0 0 22px;
}

#menu1 {
padding: 0;
margin: 0 0 0 0;
float: left;
width: 150px;

}

img {
padding: 0px;
margin: 0px;
}



#image {
background: url(images/tobogan.png) no-repeat top left;
float: left;
height: 203px;
width: 203px;
margin: 0 0 0 -21px;
padding: 0;

}

#texte {
float: left;
width: 525px;
margin: 0 0 0 20px;
padding-right: 20px;
background-color: #FFF;
background: url(images/ombredroite.png) top right repeat-y;


}



#menu a {
display: block;
width: 100%;
text-decoration: none;
text-align: center;
color: #f7c542;
line-height: 20px;
margin: 0;
padding: 0;

}

#menu a:hover {
color: #c00000;
background-color: #000;
background: url(images/menu1.png) left no-repeat;
}






.spacer {
  clear: both;
}




#ombre {
float: right;
width: 23px;

background: url(images/ombredroite.png) top right ;
margin: 0;
padding: 0;

}

#contmenu {

margin: 0px;
padding: 0px;
clear : both;
}

#ok {
clear: both;
}

#ombrehaut {
width: 565px;
height: 25px;
background: url(images/ombrehaut.png) no-repeat top right;
background-color: #cc1100;

margin: 0;


}


#ombrebas {
width: 565px;
height: 44px;

background: url(images/ombrebas.png) no-repeat top right;
background-color: #FFF;
clear: both;
margin: 0;
background-color: #cc1100;
padding : 0;


et le code HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
<title>Inconcevable.net ?</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />

<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="conteneur">
<!-- début du header -->	

	<div id="header">
	<a href="#" id="index"></a>
	</div>
<!-- fin du header -->	



	<div id="corps1">

<!-- menu rollover -->
<div id="ok">
<div id="roll1">
<a href="#" id="img1"></a>
</div>
<div id="roll2">
<a href="#" id="img2"></a>
</div>
<div id="roll3">
<a href="#" id="img3"></a>
</div>
</div>

<!-- fin du menu rollover -->


<div id="contmenu">
<div id="ombrehaut"></div>


		<div id="texte"><div id="image"></div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis, augue id commodo volutpat, nulla neque aliquam nequassa metus rutrum ligula, in aliquet nibh neque ut risus. Phasellus elementum arcu in ligula.
</p>
		</div>

		
			
			<div id="menu1">
				<ul id="menu">
				<li><a href="#" >Présentation</a></li>
				<li><a href="#">Présentation</a></li>
				<li><a href="#">Présentation</a></li>
				<li><a href="#">Présentation</a></li>
				<li><a href="#">Présentation</a></li>
				<li><a href="#">Présentation rfef frf zfg gt r</a></li>
				</ul>
			</div>
		</div>
<div id="ombrebas"></div>

	
	</div>

<!-- début du footer -->
<div id="footer">
	

<!-- fin du footer -->
	</div>
	









</div>


</body>

</html>

Modifié par Nitram (30 Mar 2006 - 13:19)
#texte {

float: left;

width: 525px;

margin: 0 0 0 20px;

padding-right: 20px;

background-color: #FFF;

background: url(images/ombredroite.png) top right repeat-y;





}

c'est le padding-right et le margin-left qui s'ajoutent l'un a l'autre dans Ie supprime le padding
Merci de ta réponse.
J'avais essayé cette solution, mais dans ce cas c'est sous Fx que le décalage se fait.
Salut,

Il s'agit d'un bug d'IE (Doubled Float-Margin Bug) qu'il est possible de corriger par l'ajout d'un simple display: inline; : 
#texte {
display: inline;
float: left;
width: 525px;
margin: 0 0 0 20px;
padding-right: 20px;
background-color: #FFF;
background: url(images/ombredroite.png) top right repeat-y;
}

Avec cela IE donnera la bonne marge et non le double. Pour en savoir plus : http://www.positioniseverything.net/explorer/doubled-margin.html

Bonne journée
Cela me rassure : c'est un bug d'IE et je n'aurais jamais pu trouver le fix tout seul Smiley murf

Merci à vous de m'avoir aidé, et spécialement à Alan qui m'a donné une réponse parfaite Smiley cligne

PS : je n'ai pas trouvé de référence à ce bug sur alsacréations, aurais je mal cherché ? Smiley sweatdrop

Smiley biggrin
Modifié par Nitram (30 Mar 2006 - 13:59)
Sujet clos
Aller à