2010-11-25 34 views
6

J'ai un ul que j'ai besoin de centrer dans un div. Le code que j'ai (vous le trouverez ci-dessous) fonctionne dans tous les navigateurs, à l'exception de IE6 & ie7 où le contenu est flottant à gauche plutôt que centré. J'ai enlevé mon code aux bases mêmes. J'ai essayé de résoudre de nombreux problèmes sans succès pour le moment, donc toute aide à ce sujet serait grandement appréciée.Besoin de centrer un ul dans un div ie6 & ie7

//CSS 
#galleryThumbs { 
    width:900px; 
    height:125px; 
    text-align:center; 
    margin:0px auto; 
} 
ul.thumb { 
    margin:0; 
    padding:0; 
    list-style:none; 
    display:inline-block; 
} 
ul.thumb li { 
    width:65px; 
    height:65px; 
    margin:0 2px 0 2px; 
    border:1px solid #ffffff; 
    display:inline-block; 
    float:left; 
} 

//HTML 
<div id="galleryThumbs"> 
    <ul class="thumb"> 
     <li><img src="http://www.thewoom.co.uk/clients/lowdklea/work/01_thumb1.jpg"></li> 
     <li><img src="http://www.thewoom.co.uk/clients/lowdklea/work/01_thumb2.jpg"></li> 
     <li><img src="http://www.thewoom.co.uk/clients/lowdklea/work/01_thumb3.jpg"></li> 
    </ul> 
</div> 

Un grand merci à l'avance Brendan

+0

Le pire est d'avoir à supporter IE6 :( – Spudley

Répondre

11

IE 6 et IE 7 ne supportent pas display:inline-block

Vous pouvez remplacer ce avec un hack IE CSS pour les inline-block éléments

zoom: 1; 
*display: inline; 

Je mettrais les enveloppées dans IE commentaires conditionnels pour cibler IE uniquement .

Démo à http://www.jsfiddle.net/gaby/qArVS/2

+0

Paniyar & Gaby, merci beaucoup pour ces réponses rapides Gaby, j'ai implémenté votre solution et cela fonctionne parfaitement – randalldon

2

IE6/7 ne supporte pas display: inline-block sur des éléments qui sont par défaut display: block. Voir aussi Quirksmode.org: CSS2 - The display declaration:

IE 6/7 accepte la valeur que sur les éléments avec un display: inline naturel.

Le <ul> est par défaut display: block, donc cela ne va pas fonctionner.

L'une des solutions consiste à donner à la <ul> une largeur fixe afin qu'elle puisse être centrée sur son parent par margin: 0 auto.

0

ci-dessus (je veux dire celle avec la déclaration de largeur pour l'UL) solution est la seule que je suis venu jusqu'à. En passant, 2 choses:

1- Votre déclaration pour Doctype déclenche le mode quirks car les balises img ne sont pas correctement fermées.

2- Paniyar a développé une nouvelle propriété pour Float, CENTRE. Cela n'existe pas. Pas dans mes livres au moins.

Mes deux cents ...

+0

Merci d'avoir regardé Billeeb. regardez le lien jsfiddle de Gaby c'est la solution acceptée.J'ai testé ce cross-browser y compris IE6 & IE7 et cela fonctionne – randalldon

1

La solution sans hacks pour Internet Explorer 7 est ajouter à votre code ceci:

#yourdiv { 
      width: 100%; 
      position: relative; 
      text-align: center; 
    } 

      #yourdiv ul { 
        float: left; 
        position: relative; 
        left: 50% 
        text-align: center; 
      } 

        #yourdiv ul li { 
          float: left; 
          position: relative; 
          display: block; 
          right: 50%;     
        } 

Avec cela, vous pouvez centrer une liste non triés dans Internet Explorer 7 sans hacks .

+0

Cela n'a pas fonctionné pour moi en IE9 mode de compatibilité w/document mode mis à IE7. – Justin