Problème de marge sous IE6

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par bmorel, 30 Mars 2009.

  1. bmorel
    bmorel Nouveau WRInaute
    Inscrit:
    11 Septembre 2006
    Messages:
    11
    J'aime reçus:
    0
    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 !
     
  2. j-mi
    j-mi WRInaute passionné
    Inscrit:
    17 Mai 2005
    Messages:
    1 753
    J'aime reçus:
    0
    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>
    
    
     
  3. bmorel
    bmorel Nouveau WRInaute
    Inscrit:
    11 Septembre 2006
    Messages:
    11
    J'aime reçus:
    0
    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
     
  4. j-mi
    j-mi WRInaute passionné
    Inscrit:
    17 Mai 2005
    Messages:
    1 753
    J'aime reçus:
    0
    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 ...
     
  5. toirex
    toirex Nouveau WRInaute
    Inscrit:
    1 Avril 2009
    Messages:
    6
    J'aime reçus:
    0
    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.
     
  6. bmorel
    bmorel Nouveau WRInaute
    Inscrit:
    11 Septembre 2006
    Messages:
    11
    J'aime reçus:
    0
    @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
     
  7. toirex
    toirex Nouveau WRInaute
    Inscrit:
    1 Avril 2009
    Messages:
    6
    J'aime reçus:
    0
    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.
     
  8. bmorel
    bmorel Nouveau WRInaute
    Inscrit:
    11 Septembre 2006
    Messages:
    11
    J'aime reçus:
    0
    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:
     
  9. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    11 974
    J'aime reçus:
    121
    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.
     
  10. toirex
    toirex Nouveau WRInaute
    Inscrit:
    1 Avril 2009
    Messages:
    6
    J'aime reçus:
    0
    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;
     
  11. bmorel
    bmorel Nouveau WRInaute
    Inscrit:
    11 Septembre 2006
    Messages:
    11
    J'aime reçus:
    0
    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:
     
  12. toirex
    toirex Nouveau WRInaute
    Inscrit:
    1 Avril 2009
    Messages:
    6
    J'aime reçus:
    0
    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...
     
  13. bmorel
    bmorel Nouveau WRInaute
    Inscrit:
    11 Septembre 2006
    Messages:
    11
    J'aime reçus:
    0
    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 !
     
  14. toirex
    toirex Nouveau WRInaute
    Inscrit:
    1 Avril 2009
    Messages:
    6
    J'aime reçus:
    0
    merci beaucoup !

    ça risque de me servir tout ça.
     
Chargement...
Similar Threads - Problème marge IE6 Forum Date
WordPress Un problème de marge Développement d'un site Web ou d'une appli mobile 5 Février 2020
problème marge droite body 100% / Ipad et Iphone Développement d'un site Web ou d'une appli mobile 7 Août 2013
Problème marge du pied de page Développement d'un site Web ou d'une appli mobile 9 Mai 2011
Problème de marge Développement d'un site Web ou d'une appli mobile 21 Mars 2011
probleme de marge de page - Resolu Développement d'un site Web ou d'une appli mobile 5 Août 2010
Probleme avec une marge inutile dans mon iframe Développement d'un site Web ou d'une appli mobile 8 Juin 2008
Problème de marge négative en basse résolution Développement d'un site Web ou d'une appli mobile 24 Avril 2006
[CSS] problème de marge dans liste Développement d'un site Web ou d'une appli mobile 28 Octobre 2005
problème avec le développeur Droit du web (juridique, fiscalité...) Mercredi à 14:05
Problème désindexation des pages de Google Débuter en référencement Mardi à 18:25
Problème d'indexation de pages sur Google Problèmes de référencement spécifiques à vos sites 31 Mai 2022
problème de redirection non souhaitée Administration d'un site Web 28 Avril 2022
Problème d'indexation Produits Prestashop Crawl et indexation Google, sitemaps 28 Avril 2022
Problème d'affichage des campagnes Google Ads dans un tableau de bord Data Studio AdWords 26 Avril 2022
Problème de vitesse d'affichage des pages sur Analytics Google Analytics 26 Avril 2022
Problème : Google Crawl et Index des pages en No Index et bloqué par le robot.txt Crawl et indexation Google, sitemaps 26 Avril 2022
Problème avec GA4 : nb de visiteurs temps réel et par jour Google Analytics 19 Avril 2022
Problème indexation pages précises en React.js Débuter en référencement 19 Avril 2022
Problème de référencement Demandes d'avis et de conseils sur vos sites 8 Avril 2022
Problème adsence : Annonces ne s'affichent plus AdSense 10 Mars 2022