Problème de marge sous IE6

**le Lun Mar 30, 2009 18:45**

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 !

**le Mar Mar 31, 2009 21:19**

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: Tout sélectionner: # 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: Tout sélectionner: 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>

**le Mar Mar 31, 2009 23:11**

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

**le Mar Mar 31, 2009 23:46**

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 ...

**le Mer Avr 01, 2009 0:14**

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.

**le Mer Avr 01, 2009 0:27**

@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

**le Mer Avr 01, 2009 0:30**

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.

**le Mer Avr 01, 2009 12:11**

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:

**le Mer Avr 01, 2009 12:23**

j-mi a écrit: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.

**le Mer Avr 01, 2009 22:22**

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;

**le Mer Avr 01, 2009 22:55**

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:

**le Jeu Avr 02, 2009 23:52**

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...

**le Ven Avr 03, 2009 13:26**

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: Tout sélectionner: <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: Tout sélectionner: <li><a>item </a></li>

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

Code: Tout sélectionner: 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: Tout sélectionner: li { border-bottom: ?; }

Code: Tout sélectionner: li { display: inline; }

Code: Tout sélectionner: 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 !

**le Ven Avr 03, 2009 19:58**

merci beaucoup !

ça risque de me servir tout ça.

Problème de marge sous IE6

Problème de marge sous IE6

Re: Problème de marge sous IE6

Re: Problème de marge sous IE6

Re: Problème de marge sous IE6

Re: Problème de marge sous IE6

Re: Problème de marge sous IE6

Re: Problème de marge sous IE6

Re: Problème de marge sous IE6

Re: Problème de marge sous IE6

Re: Problème de marge sous IE6

Re: Problème de marge sous IE6

Re: Problème de marge sous IE6

Re: Problème de marge sous IE6

Re: Problème de marge sous IE6

Lectures recommandées sur ce thème :

Qui est en ligne