28172 sujets

CSS et mise en forme, CSS3

Problème d'affichage des menus css sous IE6

Bonjour,
je suis en train de créer un site internet qui possède des menus. Dans tous les navigateurs, les menus fonctionnent correctement sauf avec IE6 et peut-être les versions antérieures.
Voici la page où on peut voir les menus : http://www.ville-isle-adam.fr/new/index.html

Voici mon codage html :
<ul id="menu1"><li><a href="""">Découverte</a>
    <ul class="niveau2">
      <li><a href="""">Nouveaux arrivants</a></li>
      <li><a href="""">Venir à L'Isle-Adam</a></li>
      <li><a href="""">Quelques données</a></li>
      <li><a href="""">Plan de ville</a></li>
      <li><a href="""">Ville internet</a></li>
      <li><a href="""">Ville européenne</a>
		<ul class="niveau3"><li><a href="""">Jumelage</a></li>
    		<li><a href="""">Infos européennes</a></li>
        </ul></li>
      <li><a href="""">Météo</a></li>
      <li><a href="""">Intercommunalité</a></li>
      <li><a href="""">Liens de la rubrique</a></li>
    </ul></li>
    <li><a href="""">Vie municipale</a>
    <ul class="niveau2">
     	<li><a href="""">Conseil municipal</a>
			<ul class="niveau3"><li><a href="""">Elus</a></li>
        		<li><a href="""">Commissions</li>
            	<li><a href="""">Organismes</li>
            	<li><a href="""">Dates des conseils</a></li>
            	<li><a href="""">Comptes-rendus</a></li>
           		<li><a href="""">Ecrivez-nous</a></li>
        	</ul></li>
       	<li><a href="""">Services municipaux</a></li>
        <li><a href="""">Infos municipales</a></li>
        <li><a href="""">La ville recrute</a></li>
        <li style="line-height:17.5px;"><a href="""">Démarches <br>
administratives</a>
			<ul class="niveau3"><li><a href="""">Actes d'état civil</a></li>
            	<li style="line-height:17.5px;"><a href="""">Demandes de<br>
subventions</a></li>
            	<li><a href="""">Autres démarches</a></li>
            </ul></li>
        <li><a href="""">Urbanisme et voirie</a>
			<ul class="niveau3"><li style="line-height:17.5px;"><a href="""">Documents<br>
d'urbanisme</a></li>
            	<li><a href="""">Demandes</a></li>
       	    <li><a href="""">Réalisations en cours</a></li>		</ul></li>
        <li><a href="""">Publications légales</a></li>
        <li><a href="""">Arrêtés municipaux</a></li>
        <li><a href="""">Liens de la rubrique</a></li>
    </ul></li>
    <li><a href="""">Au quotidien</a>
    <ul class="niveau2">
      <li><a href="""">Jeunes</a>
			<ul class="niveau3"><li><a href="""">Petite enfance</a></li>
            	<li><a href="""">Education</a></li>
                <li><a href="""">Adolescence</a></li>
            </ul></li>
        <li><a href="""">Aînés</a></li>
     	<li><a href="""">Social</a></li>
        <li><a href="""">Santé</a>
		<ul class="niveau3"><li><a href="""">Structures</a></li>
        	<li><a href="""">Médecins</a></li></ul></li>
        <li><a href="""">Prévention, sécurité</a>
		<ul class="niveau3"><li><a href="""">PPRI</a></li>
        	<li><a href="""">Plan canicule</a></li>
            <li><a href="""">Police nationale</a></li>
            <li><a href="""">Police municipale</a></li>
     </ul></li>
       <li><a href="""">FAQ</a></li>
       <li><a href="""">Cultes</a></li>
       <li><a href="""">Marchés, brocantes</a></li>
       <li><a href="""">Cimetière</a></li>
       <li><a href="""">Liens de la rubrique</a></li>
     </ul></li>
    <li><a href="""">Loisirs</a>
    <ul class="niveau2">
    <li><a href="""">Au jour le jour</a></li>
    <li><a href="""">Associations</a></li>
    <li><a href="""">Equipements</a>
<ul class="niveau3"><li><a href="""">culturels</a></li>
    	<li><a href="""">sportifs</a></li></ul></li>
    <li><a href="""">Evénements adamois</a></li>
    <li><a href="""">Cinéma</a></li>
    <li><a href="""">Location de salles</a></li>
    <li><a href="""">Liens de la rubrique</a></li>
    </ul>
    </li>
    <li><a href="""">Ville touristique</a>
    <ul class="niveau2">
      <li><a href="""">Office de Tourisme</a></li>
    	<li><a href="""">Musée L. Senlecq</a></li>
        <li><a href="""">Patrimoine</a>
<ul class="niveau3b"><li style="line-height:17.5px;"><a href="""">Découverte de<br>
la ville</a></li>
        	<li><a href="""">Hommes célèbres</a></li>
            <li><a href="""">Galerie photos</a></li></ul></li>
      	<li><a href="""">Plage</a></li>
        <li><a href="""">Environnement</a></li>
        <li><a href="""">Restauration</a>
<ul class="niveau3b"><li><a href="""">Cuisine française</a></li>
        	<li><a href="""">Cuisine étrangère</a></li>
            <li><a href="""">Restauration rapide</a></li>
      </ul></li>
        <li><a href="""">Hébergement</a></li>
        <li><a href="""">Commerces</a></li>
        <li><a href="""">Taxe de séjour</a></li>
        <li><a href="""">Liens de la rubrique</a></li></ul></li></ul>


Et voici ma feuille de style :
#nav {/*définit la taille, la position, les marges, la police des menus*/
	height: 38px;
	width: 645px;
	padding: 0px;
	float: left;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	position: relative;
	z-index: 999;
	font-family: arial, Geneva, sans-serif;
	letter-spacing: 0.08em;
	font-size: 0.7em;
	padding:0px;
}
#nav a{/*définit la couleur et la décoration des liens dans les menus*/
	color: #FFFFFF;
	text-decoration: none;
	margin:0px;
	padding:0px;
}
#nav li {/*définit la position, la couleur, la bordure et les marges de la première liste des menus (5 items)*/
	display: inline;
	background-color: #c00117;
	line-height: 35px;
	height: 35px;
	width: 124px;
	max-width: 124px;
	margin-right: 5px;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #6d0210;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	float: left;
	text-align: center;
	vertical-align: middle;
	padding:0px;
}
#nav li a {/*définit la visibilité des liens dans la première liste des menus*/
	display: block;
	padding:0px;
}

#nav ul ul {/*définit l'invisibilité de la seconde liste des menus*/
	display: none;
	max-width: 124px;
	width: 124px;
	padding:0px;
}
#nav li a:hover {/*définit les couleurs de fond, de police et de bordure lors du survol du lien dans la première liste des menus */
	color: #5a6327;
	background-color: #e0f866;
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #5a6327;
	padding:0px;
}
#nav li:hover ul.niveau2 {/*définit la visibilité de la seconde liste des menus lorsque l'item de la première liste est survolé*/
	display: block;
	padding:0px;
}
#nav li ul:hover {/*définit la position de la deuxième liste de menus*/
	position: relative;
	top: 3px;
	padding:0px;
}
#nav li li:hover ul.niveau3 {/*définit la visibilité et la position de la troisième liste des menus lorsque l'item de la deuxième liste est survolé*/
	display: block;
	position: relative;
	left: 124px;
	top: -38px;
	padding:0px;
}
#nav li li:hover ul.niveau3b {/*/*définit la visibilité et la position de la troisième liste des menus lorsque l'item de la deuxième liste du menu "ville touristique" est survolé*/
	display: block;
	position: relative;
	left: -124px;
	top: -38px;
	padding:0px;
}
#nav li li ul:hover {/*définit la position et la marge de la troisième liste des menus lorsque'elle est survolée*/
	position: relative;
	margin-top: 3px;
	padding:0px;	
}


Sur internet explorer 6, il m'élargit la taille de mes menus et surtout il n'affiche pas les menus de deuxième niveau lorsque je survole un item...

Pourriez-vous m'aider ?

Merci

Cordialement
Merci de votre réponse.
J'ai tenté d'enlever les "width" que j'avais dans mes éléments de menus mais cela change complètement le rendu.
J'ai aussi tenté d'ajouter un "zoom:1" sur les éléments n'ayant pas de layout mais IE6 ne m'affiche toujours pas les sous menus.
Je tente de me renseigner dans des bouquins, sur internet, dans les forums... Je ne sais plus comment faire.

Merci
Ah oui. Pour les liens href="", en fait il y aura un vrai lien plus tard mais je n'ai pas encore fait mes autres pages donc c'est pour cela que ce sont des liens vides pour le moment.
Administrateur
lilipaum a écrit :
Ah oui. Pour les liens href=&quot;&quot;, en fait il y aura un vrai lien plus tard mais je n'ai pas encore fait mes autres pages donc c'est pour cela que ce sont des liens vides pour le moment.

Le problème n'est pas qu'ils soient vides, mais que la syntaxe est fausse, tu as 4 guillemets : href=""""
Si tu veux créer des liens vides pour une intégration en cours de réalisation, la syntaxe la moins gênante est href="#".
Merci pour vos explications, je vais tester cela puis je vous tiendrais au courant du résultat.

Cordialement
Voilà une bonne chose de fait, merci ! Mais cela ne résout pas mon problème d'affichage des sous menus sous IE6... Ces sous menus sont cachés en temps normal sauf quand je passe sur un menu, alors ils s'affichent en dessous. Mais sur IE6, ils sont constamment cachés même quand je survole un menu...

Quelqu'un peut-il m'aider ?
Merci

Cordialement
Sujet clos
Aller à