Bonsoir,
Voilà j'ai un soucis avec un menu sous IE alors que sur Firefox et Chrome, no soucis.
Je m'explique, sous IE, le menu (ul, li...) se décalle de 30px sur la gauche et le texte n'est pas centré...
Voici le code du css :
.........................................
/* Menu */
#menu, #menu ul {padding:0;margin:0;list-style:none;line-height:30px;text-align:center;z-index:1}
#menu {font-family:'Droid Sans',arial;font-style:normal;font-weight:normal;text-transform:uppercase;font-size:13px;width:1000px;background:#000000 url(../design/menu_background.png);background-repeat:repeat-x;background-position:center top}
#menu a /* Contenu des listes */
{
display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
padding : 0; /* aucune marge intérieure */
background:#000000 url(../design/menu_off.png);background-repeat:repeat-x;background-position:center top; /* couleur de fond */
color : #FFFFFF; /* couleur du texte */
text-decoration : none; /* on supprime le style par défault des liens (la pluspart du temps = souligné) */
width : 110px; /* largeur */
height: 30px;
}
#menu li /* Elements des listes */
{
float : left;
/* pour ie qui ne reconnait pas "transparent" */
border-right :1px solid #556fa3 ; /* on met une bordure blanche à droite de chaque élément */
width : 110px; /* largeur */
height: 30px;
}
/* ie ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
border-right: 1px solid #556fa3 ; /* on met une bordure transparante à droite de chaque élément */
}
#menu li ul /* Sous-listes */
{
position: absolute; /* Position absolu */
width: 110px; /* Largeur des sous-listes */
left: -999em; /* Hop, on envoi loin du champ de vision */
}
#menu li ul li /* Eléments de sous-listes */
{
/* pour ie qui ne reconnait pas "transparent" (comme précédement) */
margin : 0 0 0 -1px;
border-top : 1px solid #556fa3; border-left: 1px solid #556fa3 ;/* on met une bordure blanche en haut de chaque élément d'une sous liste */
}
/* ie ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li
{
border-top : 1px solid #556fa3; /* on met une bordure transparante en haut de chaque élément */
}
#menu li ul ul
{
margin : -30px 0 0 110px ; /* On décale les sous-sous-listes qu'elles ne soient pas au dessus des sous-listes */
/* pour ie qui ne reconnait pas "transparent" (comme précédement) */
border-left : 1px solid #556fa3 ; /* Petite bordure à gauche pour ne pas coller ... */
}
/* ie ne reconnaissant pas le sélecteur ">" ... je me répète
*/
html>body #menu li ul ul
{
border-left : 1px solid #556fa3 ; /* on met une bordure transparante sur la gauche de chaque élément */
}
#menu a:hover, #menu li ul a:hover /* Lorsque la souris passe sur un des liens */
{
background:#000000 url(../design/menu_hover.png);background-repeat:repeat-x;background-position:center top; /* couleur de fond */
color : #FFFFFF; /* couleur du texte */
}
#menu a.selected, a.selected:hover, #menu li ul a.selected, a.selected:hover /* Lorsque la souris passe sur un des liens */
{
background:#000000 url(../design/menu_hover.png);background-repeat:repeat-x;background-position:center top; /* couleur de fond */
color : #FFFFFF; /* couleur du texte */
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug */
}
a.sous_menu, a.sous_menu:hover {font-family: 'Droid Sans',arial;font-style: normal;font-weight: normal;text-transform: none;font-size : 12px;text-decoration:none}
a.sous_menu_fin, a.sous_menu_fin:hover {font-family: 'Droid Sans',arial;font-style: normal;font-weight: normal;text-transform: none;font-size : 12px;text-decoration:none;border-bottom : 1px solid #556fa3}
......................
Merci pour votre aide, je séche...
Voilà j'ai un soucis avec un menu sous IE alors que sur Firefox et Chrome, no soucis.
Je m'explique, sous IE, le menu (ul, li...) se décalle de 30px sur la gauche et le texte n'est pas centré...
Voici le code du css :
.........................................
/* Menu */
#menu, #menu ul {padding:0;margin:0;list-style:none;line-height:30px;text-align:center;z-index:1}
#menu {font-family:'Droid Sans',arial;font-style:normal;font-weight:normal;text-transform:uppercase;font-size:13px;width:1000px;background:#000000 url(../design/menu_background.png);background-repeat:repeat-x;background-position:center top}
#menu a /* Contenu des listes */
{
display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
padding : 0; /* aucune marge intérieure */
background:#000000 url(../design/menu_off.png);background-repeat:repeat-x;background-position:center top; /* couleur de fond */
color : #FFFFFF; /* couleur du texte */
text-decoration : none; /* on supprime le style par défault des liens (la pluspart du temps = souligné) */
width : 110px; /* largeur */
height: 30px;
}
#menu li /* Elements des listes */
{
float : left;
/* pour ie qui ne reconnait pas "transparent" */
border-right :1px solid #556fa3 ; /* on met une bordure blanche à droite de chaque élément */
width : 110px; /* largeur */
height: 30px;
}
/* ie ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
border-right: 1px solid #556fa3 ; /* on met une bordure transparante à droite de chaque élément */
}
#menu li ul /* Sous-listes */
{
position: absolute; /* Position absolu */
width: 110px; /* Largeur des sous-listes */
left: -999em; /* Hop, on envoi loin du champ de vision */
}
#menu li ul li /* Eléments de sous-listes */
{
/* pour ie qui ne reconnait pas "transparent" (comme précédement) */
margin : 0 0 0 -1px;
border-top : 1px solid #556fa3; border-left: 1px solid #556fa3 ;/* on met une bordure blanche en haut de chaque élément d'une sous liste */
}
/* ie ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li
{
border-top : 1px solid #556fa3; /* on met une bordure transparante en haut de chaque élément */
}
#menu li ul ul
{
margin : -30px 0 0 110px ; /* On décale les sous-sous-listes qu'elles ne soient pas au dessus des sous-listes */
/* pour ie qui ne reconnait pas "transparent" (comme précédement) */
border-left : 1px solid #556fa3 ; /* Petite bordure à gauche pour ne pas coller ... */
}
/* ie ne reconnaissant pas le sélecteur ">" ... je me répète
*/html>body #menu li ul ul
{
border-left : 1px solid #556fa3 ; /* on met une bordure transparante sur la gauche de chaque élément */
}
#menu a:hover, #menu li ul a:hover /* Lorsque la souris passe sur un des liens */
{
background:#000000 url(../design/menu_hover.png);background-repeat:repeat-x;background-position:center top; /* couleur de fond */
color : #FFFFFF; /* couleur du texte */
}
#menu a.selected, a.selected:hover, #menu li ul a.selected, a.selected:hover /* Lorsque la souris passe sur un des liens */
{
background:#000000 url(../design/menu_hover.png);background-repeat:repeat-x;background-position:center top; /* couleur de fond */
color : #FFFFFF; /* couleur du texte */
}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug */
}
a.sous_menu, a.sous_menu:hover {font-family: 'Droid Sans',arial;font-style: normal;font-weight: normal;text-transform: none;font-size : 12px;text-decoration:none}
a.sous_menu_fin, a.sous_menu_fin:hover {font-family: 'Droid Sans',arial;font-style: normal;font-weight: normal;text-transform: none;font-size : 12px;text-decoration:none;border-bottom : 1px solid #556fa3}
......................
Merci pour votre aide, je séche...