28173 sujets

CSS et mise en forme, CSS3

Bonjour à toutes et à tous !

Je réalise un menu dépliant en css à base de <ul> et <li>, et comme souvent, ça va bien sur Firefox et pas vraiment sur IE.

Voilà ce qui se passe en image :
http://thebootlegzone.free.fr/menu.png

Il y a donc un espace blanc sous IE et pas sur FF. Avez-vous une idée d'où cela peut venir ?

Voici un bout de code CSS :
#nav {
width: 214px;
border-right: 1px solid #6B8CA6;
border-left: 1px solid #6B8CA6;
float: left;
position: relative;
}
#nav ul {
list-style: none;
position: relative;
margin: 0; 
padding: 0;
}
#nav ul ul{
list-style: none;
position: relative;
}
#nav li {
position: relative;
}
/* correction pour ie */
/* \*/
* html #nav li {
display:inline;
}
/* */

#nav ul li a {
display: block;
margin: 0;
padding: 0.2em 0 0 0.2em;
line-height: 2em;
background: #DDE9F1;
color: #005589;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
text-align: left;
/*font-weight: bold;*/
border-bottom: 1px solid #99B1C4;
}
#nav ul li a:hover {
background: #fff;
}
#nav ul ul li a {
border-left: 23px solid #AFC4D3;
color: #000;
font-size: 8pt;
line-height: 2em;
padding: 0 0 0 0.5em;
}
#nav ul ul li a:hover {
background: #ffffff;
border-left: 23px solid #6B8CA6;
}


Merci d'avance.
Modifié par whippingah (05 Jun 2006 - 11:37)
Salut,

Ton problème vient de l'utilisation de la propriété position: relative; dans les éléments #nav, #nav ul, #nav ul ul et #nav li. En l'enlevant de ces éléments, tout redevient normal sous IE. Ce problème sous IE est en rapport avec la propriété de hasLyaout.
En effet, lorsque tu utilises la propriété position: relative, pour reproduire le même effeted block sur les lien que sous firefox, cela créé sous IE un espacement entre les éléments de la liste.

Une autre technique plus fiable pour compenser le problème de lien de niveau bloc sous IE est l'utilisation de la propriété height: 1%; dans l'élément #nav ul li a.

J'éspère que cela t'aidera Smiley cligne .
Modifié par ymhotepa (01 Jun 2006 - 10:53)