Probleme border-bottom IE7

Bonjour , j'ai un probleme avec ma border-bottom elle s'affiche sur IE6,firefox,opera mais sur IE7 rien.

 <div class="menu">
     <ul>
        <li><a href="" class="selected">Accueil</a></li>
        <li><a href="">Solutions</a></li>
        <li><a href="">Tarifs</a></li>
        <li><a href="">Fonctionnement</a></li>
        <li><a href="">Realisation</a></li>
        <li><a href="">Contact</a></li>				     	
      </ul>
 </div>

#header .menu ul{
list-style:none; 
padding: 10px 0 0 10px;
letter-spacing:1px;
}

#header .menu ul li{
display:inline;
margin:1ex 0.1em 0 2em;
}

#header .menu a{
text-align:center;
color:#000;
}

#header .menu a.selected { 
color:#000; 
border-bottom:#FF6600 3px solid;
}

Modifié par tiesto95 (31 May 2009 - 16:32)

Salut,

En lisant vite fait ton code, j'ai l'impression qu'il y a une petouille :

#header .menu a.selected { 
	color:#000;
	border-bottom:#FF6600 3px solid;
}

À remplacer par :

.menu a:selected { 
	color:#000;
	border-bottom: 3px solid #FF6600;
}

++

Hello,

Nolem a écrit :
À remplacer par :

.menu a:selected { 
	color:#000;
	border-bottom: 3px solid #FF6600;
}

Euh... non. La pseudo-classe :selected n'existe pas.


@tiesto95 > je ne sais pas d'où vient le problème mais tu pourrais rajouter un padding-bottom de 3px à l'élément UL :

padding: 10px 0 3px 10px;

A noter qu'il faudrait également renseigner une valeur à margin : cf. cette astuce.
Modifié par Heyoan (31 May 2009 - 23:48)

Ah oui, exact. Je pensais à visited. ++

Salut,

Juste pour tester, rajoute :

.menu a.selected {zoom:1;}

Si ça règle ton problème, l'explication est ici (si tant est qu'on puisse expliquer... )
Modifié par marcv (01 Jun 2009 - 09:25)

Bien vu marcv.

Je ne pensais pas que l'absence de layout avait une incidence sur les bordures...

Hmm... certains bugs de dessin (le moteur de rendu a du mal à dessiner correctement les éléments dans certains cas), ou des bugs liés à d'autres choses (des flottants par exemple), peuvent être contrecarrés avec du HasLayout qui va bien.

Salut,

En relisant mieux le code et ayant les yeux plus clairs, ce ne serait pas plutôt ceci (problème de ciblage !) :

.selected{
	color:#000;
	border-bottom: 3px solid #F60;
}

Modifié par Nolem (01 Jun 2009 - 21:43)

Nolem a écrit :
En relisant mieux le code et ayant les yeux plus clairs, ce ne serait pas plutôt ceci (problème de ciblage !)

Pas sûr que tu sois beaucoup plus réveillé !

Comme dit juste avant le problème est résolu : il ne s'agit pas d'un problème de ciblage mais de HasLayout.