Elements de menu : problème de mise en page (padding/margin)

Bonjour à tous,

voila, je suis entrain de refaire mon site (nouvelle version graphique), et ancien adepte de la "mise en page tout en tableau", je suis entrain d'essayer de faire cette nouvelle version intégralement en css...

Du coup je galère un peu, mais je m'en sors.

------------------------------------

Donc voici le site actuel pour les curieux : www.nature-sauvage.com
et un aperçu de la future version : www.nature-sauvage.com/v2 (ne tenez pas compte de la photo d'accueil, elle est bidon)

Donc maintenant je sollicite votre aide. En effet, sur mes div de sous menu, j'ai qqs soucis entre IE et Firefox.

Voici en image l'apparence que je voudrais (d'après ma maquette graphique) :
http://img150.imageshack.us/img150/6215/screenshot4qv5.jpg

ce que ça donne sous Firefox (il me manque les puces à placer et caler les liens en fonction, et gérer le surlignage mouseover afin que toute la ligne soit foncée) :
http://img267.imageshack.us/img267/7651/screenshot3sc2.jpg

et sous IE (les marges sont complètement bizarres ):
http://img150.imageshack.us/img150/9803/screenshot2pr0.jpg



Maintenant le code css :

/* Elements de page */
#menu {
position: absolute;
bottom: 11;
left: 0;
z-index: 100;
width: 100%;
}


/* Menu */
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu dl {
position: relative;
float: left;
margin: 0 5px;
}
#menu dt {
cursor: pointer;
}
#menu dt a {}
#menu dt a:hover {}
#menu dd {
position: absolute;
bottom: 2.5em;
width: 101;
}
#menu ul {
width: 101;
background-image: url(img/menu_calque_fond.gif);
background-repeat: repeat;
background-position: right top;
}
#menu li {
padding-left: 3px;
padding-right: 2px;
font: 60% arial, sans-serif;
text-align: left;
}
#menu li a {
color: #000000;
text-decoration: none;
display: block;
/*height: 100%;
border: 0 none;*/
}
#menu li a:hover {
color: #ffe600;
background: #333333;
}

et le Html :

<!--- Calque Menu --->
<div id="menu">
<dl>	
	<dt onmouseover="montre('smenu3'); soundManager.play('menu');"><img onmouseover="MM_swapImage('rollC','','img/menu3_on.gif',1)" onmouseout="MM_swapImgRestore()"  src="img/menu3_off.gif" width="62" height="18" border="0" alt="" name="rollC" id="rollC"></dt>
	<dd id="smenu3">
	<img src="img/menu_calque_top.gif" width="101" height="6" border="0" alt=""><br>
		<ul>
			<li><a href="#" onmouseover="soundManager.play('sousmenu')">Vente de tirages</a></li>
			<li><a href="#" onmouseover="soundManager.play('sousmenu')">Location d'expositions</a></li>
			<li><a href="#" onmouseover="soundManager.play('sousmenu')">Reportages / Services sur mesure</a></li>
		</ul>
	<img src="img/menu_calque_bot.gif" width="101" height="10" border="0" alt=""><br>
	</dd>
</dl>
</div>

Si vous pouvez m'aider à finaliser tout ça pour ressembler au plus proche à l'image de la maquette, ce serait super cool.
Par avance, merci de votre aide.

Cordialement,
Anthony
Modifié par spiritx (21 Mar 2007 - 11:59)

Bonjour,

Pour le bug sous IE :
http://blog.alsacreations.com/2006/10/20/294-impact-sur-le-rendu-de-la-mise-en-forme-du-code-html

Salut,
ah ben oui, et le display block des li, hein ?
en plus, tu gères le padding mais pas les marges des li or elles en ont. Faut lui causer gentiment à IE mais il comprend finalement

have swing

virtualgadjo a écrit :
en plus, tu gères le padding mais pas les marges des li or elles en ont

À ma connaissance, non.

C'est l'élément ul qui a un retrait à gauche par défaut, fruit d'un padding-left: 2.5em ou d'un margin-left: 2.5em, suivant les navigateurs. Toujours penser à remettre margin-left et padding-left à zéro (ou à ne garder qu'un des deux avec la valeur souhaitée, en mettant l'autre à zéro) pour éviter des problèmes de rendu. La FAQ en parle, d'ailleurs.