18041 sujets

Questions générales et questions de débutants

Menu horizontal... devenu vertical sous IE

Bonjour ;
Nouveau, novice, ça fait beaucoup de handicaps, je sais ^_^
J'ai réalisé tout récemment un petit site pour ma compagne, en suivant quelques tutoriaux et en m'inspirant, pour le menu (horizontal déroulant sur une ligne en css ; l'une des rubriques contient un sous-menu), de codes communiqués sur ce site. Ma compagne me fait part de deux soucis, que je n'ai évidemment pas constatés sur Safari (je suis sur Mac), ni sur FireFox, Opera, Camino ou Seamonkey...
Sur IE (5,6 ou 7), le menu et le sous-menu sont en bleu, alors que je les ai définis en noir dans la feuille de styles.
Plus problématique : les mêmes menus apparaissent en vertical au lieu d'être sur une ligne comme spécifié (malgré un "display:inline"...).
Je vous retranscris ici le code HTML pour la navigation :


<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
</head>
<body>
<div id="menu">
<dl>
<dt onmouseover="montre('smenu1');"><a href="pros.html"
title="Construisez et suivez vos chantiers avec nous">Professionnels</a></dt>
<dd id="smenu1">
<ul>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="montre('smenu2');"><a href="particuliers.html"
title="Reposez-vous sur nous pour vos travaux !">Particuliers</a></dt>
<dd id="smenu2">
<ul>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="montre('smenu3');"><a href="references.html"
title="Ils nous ont choisi... Jugez par vous-m&ecirc;me">Nos
r&eacute;alisations</a></dt>
<dd id="smenu3">
<ul>
<li><a href="construction.html">construction</a></li>
<li><a href="renovation.html">r&eacute;novation</a></li>
<li><a href="agrand.html">agrandissement</a></li>
<li><a href="agencement.html">agencement</a></li>
<li><a href="suivi.html">suivi complet</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="montre('smenu4');"><a href="partenaires.html"
title="Nous partageons nos comp&eacute;tences">Nos
partenaires</a></dt>
<dd id="smenu4">
<ul>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="montre('smenu5');"><a href="contact.html"
title="Devis, appels d'offres, infos... : contactez-nous">Nos
coordonn&eacute;es</a></dt>
<dd id="smenu5">
<ul>
</ul>
</dd>
</dl>
<dl>
</dl>
</div>


Et voici pour les CSS :


dt, dl, dd, ul, li {
list-style-type : none;
padding : 0;
}

#menu {
position : absolute;
left : 46px;
top : 135px;
color: #000;
}

#menu dl {
float : left;
border-left : 3px solid #c4ab9b;
}

#menu li {
display : inline;
} 

#menu a {
text-align : justify;
font-family : Helvetica, MS Georgia, sans-serif;
font-size : 120%;
font-weight : bold;
padding-left : 10px;
padding-right : 10px;
width : 850px;
text-decoration: none;
color: #000;
}

#menu a:hover {
color : #c4ab9b;
}

#smenu1, #smenu2, #smenu3, #smenu4 {
position : absolute;
left : 0;
font-family : Helvetica, MS Georgia, sans-serif;
text-align : center;
font-size : 72%;
font-weight : bold;
width : 800px;
}


Cette histoire de menu qui ne s'affiche pas comme il le devrait me désespère (les couleurs aussi, pourtant chez moi c'est bien en noir...).

Merci pour votre aide !
Sujet clos
Aller à