Décalage div dans IE

Bonjour,

Je suis en train de refondre complètement mon site que ce soit au niveau design qu'accessibilité.
Je bute actuellement sur un décalage sous IE qui n'existe pas sous firefox.

Quelqu'un aurait une idée ? j'ai tenté de multiple changement dans les css mais impossible de parvenir à mes fins.

Voici la partie css concernée :

#menu {
	float: left;
	width: 571px;
	height: 49px;
	background: url(images/homepage03.gif) no-repeat left top;
}
/* Smenu haut */
dl, dt, dd {
margin: 0;
padding: 0;
height:49px;
list-style-type: none;
}
#menuhaut {
position: absolute;
left:289;
top:0;
z-index:100;
padding-left:189px;
}
#menuhaut dl {
float: left;
margin: 0 1px;
width: 142px;
background: url(images/homepage03.gif) no-repeat left top;
}
#menuhaut dt {
cursor: pointer;
text-align: center;
font-weight: bold;
}
#menuhaut dd {
border: 1px solid gray;
background: #fff;
}
#menuhaut li {
text-align: center;
background: #fff;
}
#menuhaut li a, #menuhaut dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menuhaut li a:hover, #menuhaut dt a:hover {
background: #fff;
background: url(images/homepage03.gif) no-repeat left top;
}
/* Smenu haut */

#menu ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

#menu li {
	display: inline;
}

#menu a {
	display: block;
	float: left;
	width: 125px;
	height: 46px;
	padding: 3px 0px 0px 15px;
	background: url(images/homepage03.gif) no-repeat right top;
}

#menu small {
	padding-bottom: 17px;
	background: url(images/homepage04.gif) no-repeat left bottom;
}

Voici la partie XHTML concernée :

<div id="menuhaut">
		<dl>	
			<dt onmouseover="montre('smenuhaut1');"><a href="#" id="menu1" accesskey="1" title="" class="link1">Locations<br /><small class="text1">Louer de particulier <br />&agrave; particulier</small></a></dt>
				<dd id="smenuhaut1">
					<ul>
						<li><a href="#">Sous-menu 1.1</a></li>
						<li><a href="#">Sous-menu 1.2</a></li>
						<li><a href="#">Sous-menu 1.3</a></li>
					</ul>
	
				</dd>
		</dl>
		<dl>	
			<dt onmouseover="montre('smenuhaut2');"><a href="#" id="menu2" accesskey="1" title="" class="link1">Ventes<br />
				<small class="text1">Acheter et vendre <br />
				de particulier &agrave; particulier</small></a></dt>
				<dd id="smenuhaut2">
					<ul>
						<li><a href="#">Sous-menu 1.1</a></li>
					</ul>
	
				</dd>
		</dl>
		<dl>	
			<dt onmouseover="montre('smenuhaut3');"><a href="#" id="menu3" accesskey="1" title="" class="link1">Saisonni&egrave;res<br />
				<small class="text1">Locations vacances<br />
				de particulier &agrave; particulier</small></a></dt>
				<dd id="smenuhaut3">
					<ul>
						<li><a href="#">Sous-menu 1.1</a></li>
						<li><a href="#">Sous-menu 1.2</a></li>
					</ul>
	
				</dd>
		</dl>
		<dl>	
			<dt onmouseover="montre('smenuhaut4');"><a href="#" id="menu4" accesskey="1" title="" class="link1">Service<br />
				<small class="text1">Aide/FAQ, Outils pratiques,<br />
				Pr&ecirc;t, Assurance, ...</small></a></dt>
				<dd id="smenuhaut4">
					<ul>
						<li><a href="#">Sous-menu 1.1</a></li>
						<li><a href="#">Sous-menu 1.2</a></li>
						<li><a href="#">Sous-menu 1.3</a></li>
					</ul>
	
				</dd>
		</dl>
  </div>

Et pour finir voici la page où vous pourrez voir ce code "buggé" intégré : http://www.apparticulier.com/new/homepage.html

Outre le débuggage, je suis ouvert à toute critique concernant ce nouveau design et "code".

Merci,
Jérôme

Salut,

padding-left:189px; dans le #menuhaut.

je pense que padding est la source du décalage sous IE6. enfin ...je suis pas expert mais me semble bien.

bon bien sur y a la solution du css pour ie dans un commentaire conditionnel

mais bon y a peut-être autre chose a faire pour placer ton menu.

pascal
Modifié par CPascal (30 May 2007 - 17:59)

CPascal a écrit :
Salut,

padding-left:189px; dans le #menuhaut.

je pense que padding est la source du décalage sous IE6. enfin ...je suis pas expert mais me semble bien.

bon bien sur y a la solution du css pour ie dans un commentaire conditionnel

mais bon y a peut-être autre chose a faire pour placer ton menu.

pascal

pascal

Oui le problème vient bien de ce padding-left mais si je ne le mets pas, les 4 cases du haut se supperpose avec le nom du site...

CPascal a écrit :
Salut,

padding-left:189px; dans le #menuhaut.

je pense que padding est la source du décalage sous IE6. enfin ...je suis pas expert mais me semble bien.

bon bien sur y a la solution du css pour ie dans un commentaire conditionnel

mais bon y a peut-être autre chose a faire pour placer ton menu.

pascal

pascal

Concernant un commentaire conditionnel je dois t'avouer que je ne vois pas quoi dire à IE pour qu'il se redécale à gauche... padding-left: 0px; ? left:-189px; ?
Je n'ai rien trouvé...

ben tu redeclares le padding-left à 0.
La derniere déclaration l'emporte sur les precedentes.

en mettant le commentaire conditionnel en dessous du link au css normal
donc.

tu l'as testé? si ca marche pas mais le css de toute façon
Modifié par CPascal (30 May 2007 - 16:58)

CPascal a écrit :
ben tu redeclares le padding-left à 0.
La derniere déclaration l'emporte sur les precedentes.

en mettant le commentaire conditionnel en dessous du link au css normal
donc.

tu l'as testé? si ca marche pas mais le css de toute façon

J'ai fait

<link href="default.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
	@import url("layout.css");
	<!--[if IE]>
   #menuhaut {
padding-left:0px;
}
<![endif]-->
-->
</style>

et aucun changement c'est toujours décalé :'(

Re,

essai ça j'ai testé en local sans les images donc je pense que ça passe

<style type="text/css">
<!--
	@import url("layout.css");	
-->
</style>

<!--[if IE]>
<style>
   #menuhaut {
padding-left:0px;
}
</style>
<![endif]-->

peut-etre qu'on ne peut pas utiliser les commentaires conditionnels a l'intérieur d'un commentaire pour le @ import.
Modifié par CPascal (30 May 2007 - 17:44)

CPascal a écrit :
Re,

essai ça j'ai testé en local sans les images donc je pense que ça passe

<style type="text/css">
<!--
	@import url("layout.css");	
-->
</style>

<!--[if IE]>
<style>
   #menuhaut {
padding-left:0px;
}
</style>
<![endif]-->

peut-etre qu'on ne peut pas utiliser les commentaires conditionnels a l'intérieur d'un commentaire pour le @ import.

Oui le décalage a disparu merci !
Bon y a encore des bugs mais j'pense trouver seul pour le reste

Un grand merci à toi !