28172 sujets

CSS et mise en forme, CSS3

[Résolu] Menu déroulant en CSS & IE6...

Bonsoir tout le monde,

J'ai créé un menu déroulant horizontal, qui fonctionne sous Firefox/safari/opera/IE7...(pour IE7 j'ai du créer une feuille de style dédiée, je fais de même pour IE6)
Voilà le test en question

J'ai testé ma page sous IE6, et c'est là que le bât blesse :

http://nameo.free.fr/omairi_/omairi_ie6.jpg

Passons sur le fait que le menu ne se déroule pas, ce sera mon second bug à corriger... Cela dit, j'aimerais que mon menu s'affiche horizontalement, ce qui n'est vraiment pas le cas ^^
Comme j'ai le nez dans le code, je ne vois pas le petit truc probablement stupide qui gâche tout Smiley rolleyes 


/* MENU DEROULANT */

ul, li {
padding : 0;
}

div#Menu {
	margin-left: -2px;
    font-size: 10px;
}

#global-nav {
	background-image: url(img/layout/navbar.png);
	background-repeat: no-repeat;
	background-color: #efefee;
	width: 698px;
	font-weight: bold;
	height: 27px;
	padding: 0;
	position : absolute;
	top: 152px;
	letter-spacing: 1px;
}

#global-nav ul li {
    display : inline;
    background: #efefef;
}

#global-nav li {
	width : auto;
	height : 27px;
	overflow : hidden;
    border-left: thin solid #c9b26a;
    display : block;
    float : left;
    text-align : left;
    overflow : hidden;
    font-weight: bold;
    text-transform : lowercase;
}

#global-nav li a, #global-nav li a:visited {
    color: #000000;
    text-decoration: none;
    padding : 5px 5px 0 5px;
    display : block;
    margin : 0;
    width : 100%;
    height : 100%;
}

#global-nav li a:hover {
	background : #FFFFFF;
}

#global-nav li .sub-nav {
      position : absolute;
	  top : 20px;
      padding : 5px 0px 0 0px;
      font-weight: normal;
}

#global-nav li#communaute {
    position:relative;
    right: 182px;
	width: 55px;
}

#global-nav li .sub-nav li {
	display : none; /* IMPORTANT */
	height : 23px;
	border-top : thin solid #D96C00;
    font-weight: normal;
    text-transform : lowercase;
}

#global-nav li .sub-nav li a {
	background : #EDEDED;
	padding : 3px 3px 0 4px;
}

#global-nav li .sub-nav li a:hover {
	background : #FFFFFF;
}
#global-nav li:hover > .sub-nav li {
	display : block;
}

/*fin menu */


Merci d'avance à celui/ceux qui m'aidera/m'aideront
Modifié par Lux_ (26 Mar 2009 - 18:56)
Salut,

Il faut pour ça que tu donnes une largeur à tes li sur IE6.
Au passage, ton header ne se centre pas sur IE6 avec des résolutions plus grandes.

De plus, faire des feuilles de style spécifiques aussi longues est souvent significatif d'une mauvaise utilisation des propriétés CSS.
Je n'avaisvpas encore pris le temps de "nettoyer" tout ça, j'avais juste c/c mon css et progressais petit bout par petit bout. J'ai réussi à mettre mon menu en ligne (merci pour le hint), est-ce que quelqu'un aurait une soluce pour le rendre déroulant sous IE6?


/* MENU DEROULANT */

ul, li {
padding : 0;
margin: 0;
}

div#Menu {
	margin-left: 38px;
    font-size: 10px;
}

#global-nav {
	margin-top: 28px;
}


#global-nav li {
	width: 109px;
	height : 22px;
    border-left: 1px solid #c9b26a;
	border-bottom: 1px  solid #c9b26a;
	padding: 0 3px 0 3px;
}
/*fin menu */



merci !
Le problème est que tu utilises deux techniques CSS qui ne fonctionnent ni l'une ni l'autre sur IE6 : Le sélecteur d'enfants ">" et la pseudo-classe :hover sur un autre élément qu'un lien.

La meilleure solution pour faire fonctionner ton menu sur IE6 est de passer par du Javascript spécifique à ce navigateur.
Pour le menu qui se retrouve à la verticale (avec chaque item sur 100% de la largeur): ça vient de l'utlisation d'un lien en display:block dans les LI flottants. C'est parfaitement logique, mais ça perturbe IE 6-7 (ou juste IE6?). Solution: faire flotter les liens également.
Sujet clos
Aller à