Probleme de display:block sous ie6

Bonjour,

J'imagine que ce sujet a déjà été traité de nombreuses fois car il ne s'agit pas d'une utilisation avancée des CSS mais, voyez-vous, il n'est pas aisé de faire une recherche sur ces termes.

Donc j'expose mon problème, il s'agit du menu supérieur qui ne s'affiche pas correctement sous ie6 sur cette page toute bête http://carte.cap-sizun.com/ Ce navigateur n'accepte pas de mettre mes <li> inline lorsque qu'ils contiennent des <a> block. Je me retrouve donc avec mes liens les uns au dessous des autres.

Voici mon html:

<div id="headermenu" class="headermenu">
  <ul>
    <li><a href="http://www.cap-sizun.com" class=titre>Cap-sizun.com</a></li>
    <li><a href="http://www.cap-sizun.com">Le Portail</a></li>
    <li><a href="http://forum.cap-sizun.com">Le Forum</a></li>
    <li><a href="http://carte.cap-sizun.com">La Carte</a></li>
  </ul>
</div>
<div id="header" class="header">
</div>

Et mes CSS:

div.header{
	border: 1px solid #000000;
	height: 150px;
	margin: 0;
	margin: 0 0 12px 0;
	padding: 0;
	width: 868px;
}

div.headermenu{
	background: url(http://www.cap-sizun.com/images/bg-barre-noire.gif);
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	border-top: 0;
	height: 22px;
	margin: 0;
	padding: 0;
}

div.headermenu a{
	color: #FFD700;
	display: block;
	height: 20px;
	margin: 0;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 3px;
	text-decoration: none;
}

div.headermenu a:hover{
	background-color: #708090;
	display: block;
}

div.headermenu li{
	border: 0;
	border-right: 1px solid #E2E2E2;
	display: inline;
	float: left;
	margin: 0;
	padding: 0;
}

div.headermenu ul{
	margin: 0;
	padding: 0;
}

Je pense qu'il s'agit d'un problème banal pour vous, j'espère seulement qu'il existe une solution
Merci pour votre aide,
Loïc
Modifié par Cleden (24 Feb 2008 - 22:03)

Salut,

Il faut supprimer les display:block; qui se trouvent sur "#headermenu a" et "#headermenu a:hover". Ensuite, tu peux définir une hauteur de ligne (line-height) sur ces derniers plutôt que d'indiquer une hauteur (height).

Merci beaucoup, j'ai presque réussi à obtenir ce que je voulais. Quelle galère ce ie6 mais c'est quand même 20% de mes visites.

Désormais, malgré l'utilisation du line-height sur les <a>, le background modifié au passage de la souris ne couvre pas toute la surface du <li>, y a-til quelque chose que j'aurai raté ?

un padding-bottom sur tes liens.

Rien à faire, j'ai bien mes padding-top et bottom à 0 et pourtant le background reste 2 ou 3px plus petit que le <li>.

oui, ben justement ! Il n'y a qu'à mettre un padding-bottom sur le lien de 2 ou 3px.

Je ne comprend pas, mon but est d'avoir tout le background du <li> et du <a> qui change au survol de la souris, j'y arriverai en mettant un padding sur mon <a> ? Pour l'instant, comme sur la capture, il n'y a qu'une partie qui est modifiée.


Modifié par Cleden (25 Feb 2008 - 14:51)

J'ai beau tourner et retourner le problème dans tous les sens, je n'y arrive pas.

Est-il impossible d'avoir la totalité du background du <a> qui se modifie au survol de la souris ? Quelqu'un peut-il me donner un site qui y parvient et duquel je pourrai m'inspirer ?

As tu essayé de mettre un display:block; sur ton a ?? (il pourrait prendre toute la place et je pense que ca aurait l'effet escompté...)

Salut,

Ou je suis à côté de la plaque ou faut que j'arrête l'apéro

#headermenu li{
float: left;
}

#headermenu a{
display: block;
	color: #FFD700;
	margin: 0;
	text-decoration: none;
	line-height: 20px;
	padding: 0 5px 0 5px;
}

Ca ne le fait pas?

Malheureusement non, ça ne fonctionne pas.
Si je met un display:block sur mon <a>, les éléments se retrouvent les uns au dessous des autres et non plus "inline".

div.headermenu li{
	border: 0;
	border-right: 1px solid #E2E2E2;
	display: inline;
	margin: 0;
	padding: 0;
}

div.headermenu a, div.headermenu a:visited, div.headermenu a:active{
	color: #FFD700;
	margin: 0;
	padding: 0 5px 0 5px;
	text-decoration: none;
	line-height: 24px;
}

div.headermenu a:hover{
	background-color: #708090;
}

Merci quand même

Salut,

Je proposais de placer tes li en float: left pour palier à ce léger défaut