Problème de marge sous IE6

bmorel · 30 Mars 2009

Bonjour à tous,

J'essaie de rendre un menu (respectueux des standards) compatible IE6, et je me heurte à un problème : ce navigateur (et c'est le seul, bien entendu), ajoute un espace important (une sorte de ligne parasite) après chaque <li>.

CSS :

ul {
list-style-type: none;
border: 1px solid black;
float: left;
}

ul, li {
margin: 0;
padding: 0;
}
a {
display: block;
background-color: yellow;
text-decoration: none;
}

HTML :

<ul>
<li><a href="#">test 1</a></li>
<li><a href="#">test 2</a></li>
<li><a href="#">test 3</a></li>
</ul>

A noter, cela ne se passe que lorsque le <a> est en display: block;
Pourtant cette condition est indispensable pour l'affichage de mon menu.

Une idée du pourquoi du comment et du comment y remédier?

Merci !

j-mi · 31 Mars 2009

te fais pas du mal inutilement
on est a IE8 maintenant
au pire si tu a un ie6 vire le et mets firefox

sinon dans les standard

tu dois realiser un container

Code:

# containmenu {
}

# containmenu.ul {
list-style-type: none;
border: 1px solid black;
float: left;
}

# containmenu.ul, li {
margin: 0;
padding: 0;
}
# containmenu.a {
display: block;
background-color: yellow;
text-decoration: none;
}

et en html :

Code:

HTML :


<div id="conainmenu>
<ul>
<li><a href="#">test 1</a></li>
<li><a href="#">test 2</a></li>
<li><a href="#">test 3</a></li>
</ul>
</div>

bmorel · 1 Avril 2009

Bonsoir, et merci pour ta réponse.
Bizarre pour ce qui est des specs, car le <ul> directement dans le <body> ça valide aussi bien en transitional qu'en strict.
En tout cas ça n'a pas l'air de changer quoi que ce soit au problème ? :?

Sinon pour IE6, je suis bien de ton avis, mais hélas les stats disent qu'encore 20% des internautes l'utilisent, ce qui fait qu'il est difficile de l'ignorer !

Bonne soirée,
Benjaminn

j-mi · 1 Avril 2009

dans ce cas mets un js pour rediriger les ie6 vers une page d'upgrade ver firefox :mrgreen:

que veux tu que I6 t'apportes ? te conforter perso dans une optique frein a la dev ?
Heuuu moi je dev pas pour des rapiaces qui savent que naviguer en ie6 ...

J'ai pour habitudes de dire dis moi a quoi ressemble ton adsense et je dirai qui tu es
mais c identique pour les explorer ...

toirex · 1 Avril 2009

salut,

Le problème vient de ton "dispaly:block;" sur tes liens.

As-tu besoin que tes liens soient des blocks dans ton menu ?

Bonne soirée.

bmorel · 1 Avril 2009

@j-mi : encore une fois tu n'as pas tort, mais peut-on réellement s'asseoir sur 20% de son trafic? :wink:

@toirex : effectivement le problème vient du display:block, mais hélas j'en ai besoin pour que le background remplisse l'intégralité du <li> :roll:

Bon j'en déduis sagement qu'il n'y a pas de solution en continuant sur cette voie, je m'en vais donc en explorer d'autres, merci pour votre aide !

Ben

toirex · 1 Avril 2009

Dans ce cas une solution simple

Rajoute ces 2 lignes à ton code pour les liens :
float:left;
clear:both;

a {
display: block;
float:left;
clear:both;
background-color: yellow;
text-decoration: none;
}

Cela permet de contourner le problème d'espace sous ie6, en espérant que cela ne t'en crée pas d'autre.

bmorel · 1 Avril 2009

Merci pour l'idée, mais sous IE7 ça fait plus ou moins comme s'il n'y avait plus de display:block sur le <a> :evil:

UsagiYojimbo · 1 Avril 2009

j-mi a dit:
que veux tu que I6 t'apportes ?

Ca c'est une très mauvaise façon de voir la chose. Tu fais des sites pour toi ou pour tes utilisateurs ? Si un utilisateur donné ne parvient pas à surfer sur le site, il va très vite en partir, d'autant plus si tu essaies de lui forcer la main en lui demander de changer son navigateur. Et il y a encore pas mal de gens sur IE6, malgré tout, même si ça baisse.

Le client s'en fout de savoir si IE6 est dépassé, lui il veut que son site fonctionne sur sa machine. point.

Donc pour le moment il faut faire avec.

toirex · 1 Avril 2009

Bon dernière solution si ce n'est que pour ton fond...

Place ton fond sur tes li et non sur tes liens :mrgreen:

du coup plus besoin de faire un display:block;

bmorel · 1 Avril 2009

C'est une idée, sauf que l'élément doit être cliquable sur toute sa largeur, et là sans display:block c'est mort :wink:

toirex · 3 Avril 2009

Bon désolé mais je sèche.

Je ne vois qu'un hack ou un commentaire conditionnel pour replacer correctement les cases de ton menu...

bmorel · 3 Avril 2009

Alors j'ai trouvé quelques pistes :

La première, c'est que ce bug ne se produit pas si on retire tous les espaces blancs du html entre les <li> (oui, c'est idiot) :

Code:

<li><a>item 1</a></li><li><a>item 2</a></li>

La seconde consiste à ajouter un espace avant chaque fermeture de la balise <a> (derechef) :

Code:

<li><a>item </a></li>

Ensuite, il est possible d'utiliser cette propriété CSS propriétaire (attention, ça ne valide pas) :

Code:

 a { _height: 1em; }

Enfin, parmi les solutions que je n'ai pas réussi à faire fonctionner :
(ou qui ont généré plus de problèmes qu'elles n'en résolvaient)

Code:

li { border-bottom: ?; }

Code:

li { display: inline; }

Code:

ul a {
display: block;
float: left;
clear: left;
}
li>a {
float: none;
}

Pour conclure, je crois qu'hélas seules les 2 premières sont vraiment correctes pour garder du HTML et du CSS valides, par contre il faut bien penser à garder ce formatage à chaque fois que l'on touche au code du menu !

toirex · 3 Avril 2009

merci beaucoup !

ça risque de me servir tout ça.