IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

[IE] UL + border-bottom et LI + padding


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Expert éminent
    Avatar de Paul TOTH
    Homme Profil pro
    Freelance
    Inscrit en
    Novembre 2002
    Messages
    8 964
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 56
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Freelance
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Novembre 2002
    Messages : 8 964
    Par défaut [IE] UL + border-bottom et LI + padding
    bonjour, voici un tout petit bout de code qui montre une solution qui fonctionne mais dont je voudrais supprimer le hack IE (* html) si possible...

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
     
    <html>
    <head>
    <style type="text/css">
    ul {
      font-family: Verdana;
      font-size: 11px;
      position: relative;
      list-style-type : none; 
      border-bottom: 1px solid gray;
      height: 22px;
    }
    * html ul { /* IE */
      border: none;
      background: url('gray1x1.gif') repeat-x bottom;
    }
    ul li {
      float: left;
      margin-left: 4px;
    }
    ul li a {
      float: left;  
      border: solid 1px gray;
      background-color: silver;
      padding: 4px;
      text-decoration: none;
    }
    ul li a.active {
      background-color: white;
      border-bottom-color: white;
    }
    </style>
    </head>
    <body>
    <ul> 
      <li><a href="#" class="active">actif</a></li>
      <li><a href="#">inactif</a></li>
    </ul>
    </body>
    </html>
    le problème est que sous IE, quel que soit la taille que je donne au UL, le border-bottom se trouve toujour en dessous des LI+A, alors que sous FF, Opera, Chrome, le border est bel et bien au même niveau que les border des LI+A.

    Le hack consiste à placer un pixel gris répété horizontalement en bas du UL, il est donc bien à l'intérieur du UL, sous les LI+A.

    Je pourrais évidemment utiliser ce pixel dans tous les navigateurs pour avoir le même code qui fonctionne chez tout le monde, mais la propriété Border est là pour ça, donc intellectuellement ça me gène

    d'ailleurs si je vire le hack et utilise le pixel, il faut bel et bien augmenter la taille de l'UL à 23px pour que l'image soit bien positionnée à la fois sous IE et FF, en fait IE applique une taille de 23px dès qu'on défini height, même à 0px !!!

    Merci

    EDIT: petite précision, le pb est corrigé sous IE7+ en ajoutant un DOCTYPE strict...reste IE6
    Developpez.com: Mes articles, forum FlashPascal
    Entreprise: Execute SARL
    Le Store Excute Store

  2. #2
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 931
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 931
    Par défaut
    D'une part, n'oublie jamais d'utiliser un DOCTYPE en bonne et due forme pour faire passer les navigateurs en mode Standard.

    Ensuite, les valeurs par défaut des propriétés margin, padding et list-style-position des éléments ul et li sont différentes selon les navigateurs, donc commence par les réinitialiser.

  3. #3
    Expert éminent
    Avatar de Paul TOTH
    Homme Profil pro
    Freelance
    Inscrit en
    Novembre 2002
    Messages
    8 964
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 56
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Freelance
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Novembre 2002
    Messages : 8 964
    Par défaut
    Citation Envoyé par Bisûnûrs Voir le message
    D'une part, n'oublie jamais d'utiliser un DOCTYPE en bonne et due forme pour faire passer les navigateurs en mode Standard.

    Ensuite, les valeurs par défaut des propriétés margin, padding et list-style-position des éléments ul et li sont différentes selon les navigateurs, donc commence par les réinitialiser.
    bonjour,

    oui le DOCTYPE corrige le pb sous IE7+, mais IE6 est récalcitrant

    pour ce qui est des valeurs par défaut, j'ai tout testé, et je n'ai gardé dans mon bout de code que le strict minimum pour mettre le pb en valeur.

    comme je l'explique, sous IE6 la hauteur de l'UL passe de 0 à au moins 23px selon que l'on précise l'attribut height ou non. Les valeurs de 0 à 22 donne une taille de 23px, soit un pixel de trop pour que le border soit à sa place

    j'ai testé également le padding ou margin négatif, rien n'y fait, le border-bottom reste toujours un pixel trop loin.

    EDIT: le hack habituel sous IE6 est d'ajouter un "overflow: hidden" qui interdit au UL de dépasser la taille demandée...sauf que dans ce cas, les LI+A ne peuvent plus recouvrir le bord gris quand ils sont actifs (.active) !
    Developpez.com: Mes articles, forum FlashPascal
    Entreprise: Execute SARL
    Le Store Excute Store

  4. #4
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 931
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 931
    Par défaut
    En fait IE6 ne superpose pas les bordures et pousse la bordure du ul si j'ai bien compris.

    Ce que tu peux faire, c'est de ne pas mettre de bordure en bas des li, ni à celui actif, et de rajouter 1px au padding-bottom du li actif.

    Au passage, ton float:left ne sert à rien sur tes a, tu peux le changer en display:block.

    Ce qui donne :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    ul {
      font-family: Verdana;
      font-size: 11px;
      position: relative;
      list-style-type : none; 
      border-bottom: 1px solid gray;
      height: 22px;
    }
    ul li {
      float: left;
      margin-left: 4px;
    }
    ul li a {
      display: block;  /* MODIF ICI */
      border: solid 1px gray;
      border-bottom:0;  /* MODIF ICI */
      background-color: silver;
      padding: 4px;
      text-decoration: none;
      margin-bottom:-1px
    }
    ul li a.active {
      background-color: white;
      padding-bottom:5px;  /* MODIF ICI */
    }

  5. #5
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 931
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 931
    Par défaut
    Rectifications ... J'ai fait mon boulet, ça ne fonctionnait pas sur IE6.

    J'ai un peu modifié ton HTML en mettant la classe active sur le li plutôt que sur le a, ça a l'air de fonctionner :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <title>Truc</title>
      <style>
        ul {
          font-family: Verdana;
          font-size: 11px;
          position: relative;
          z-index:1;
          list-style-type : none; 
          border-bottom: 1px solid gray;
          height: 22px;
        }
        ul li {
          float: left;
          margin-left: 4px;
          position:relative;
          top:1px;
          z-index:2;
          padding: 4px;
          border: solid 1px gray;
          background-color: silver;
        }
        ul li a {
          display: block;  
          text-decoration: none;
          margin-bottom:-1px;
        }
        ul li.active {
          background-color: white;
          border-bottom:1px solid white;
        }
      </style>
    </head>
    <body>
     
    <ul> 
      <li class="active"><a href="#">actif</a></li>
      <li><a href="#">inactif</a></li>
    </ul>
     
    </body>
    </html>

  6. #6
    Expert éminent
    Avatar de Paul TOTH
    Homme Profil pro
    Freelance
    Inscrit en
    Novembre 2002
    Messages
    8 964
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 56
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Freelance
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Novembre 2002
    Messages : 8 964
    Par défaut
    Ah merci, mais en fait en cherchant dans ton code j'ai trouvé ce qu'il fallait modifier

    1) passer la taille de l'UL à 23px
    2) passer la position des LI en relative
    3) positionner les LI à top: 1px

    et là ça marche nickel, merci !
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <style type="text/css">
    ul {
      font-family: Verdana;
      font-size: 11px;
      position: relative;
      list-style-type : none; 
      border-bottom: 1px solid gray;
      height: 23px;
    }
    ul li {
      position: relative;
      top: 1px;
      float: left;
      margin-left: 4px;
    }
    ul li a {
      float: left;  
      border: solid 1px gray;
      background-color: silver;
      padding: 4px;
      text-decoration: none;
    }
    ul li a.active {
      background-color: white;
      border-bottom-color: white;
    }
    </style>
    </head>
    <body>
    <ul> 
      <li><a href="#" class="active">actif</a></li>
      <li><a href="#">inactif</a></li>
    </ul>
    </body>
    </html>
    PS: le float:left des A n'est pas nécessaire ici, mais l'est quand j'ouvre un menu pop-up sur un onglet...mais ça me va comme ça !
    Developpez.com: Mes articles, forum FlashPascal
    Entreprise: Execute SARL
    Le Store Excute Store

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Besoins d'aide pour un projet: border-bottom
    Par djtimo80 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 05/08/2012, 11h12
  2. le border bottom du GridView est persistant
    Par zooffy dans le forum ASP.NET
    Réponses: 2
    Dernier message: 23/03/2011, 15h49
  3. border-bottom avec IE7
    Par tiesto95 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 31/05/2009, 18h01
  4. border-bottom-color mal interpreté par firefox
    Par oceane751 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 29/08/2008, 10h21
  5. [CSS] pb border-bottom et border-top
    Par php_de_travers dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 21/04/2006, 14h29

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo