2008-11-03 7 views
2

Mon lien est ici:IE6 balles sur les listes

Example Page

J'utilise la liste de style image: donner mes listes horizontales (très haut et en bas). Seperators J'ai une classe de .first pour enlever l'image du premier li dans chaque liste.

Lo et voir dans IE6, cela ne fonctionne pas. Ce qui se passe, c'est que les images de balle ne sont pas affichées, et aussi les quelques pixels du bas du texte semblent être recadrées.

Screenshot

J'ai corrigé quelques bugs « hasLayout » avec cette page, mais j'ai le sentiment est quelque chose à voir avec ma hiérarchie de règles, même si aucun montant de piratage au sujet semble fonctionner pour moi.

Quelqu'un peut-il nous éclairer à ce sujet? Merci.

En outre, mon changement de couleur fonctionne sur le vol stationnaire, mais pas sur le soulignement, dans le même sélecteur? OK, j'ai utilisé la technique d'image d'arrière-plan suggérée par yoavf, qui semble faire l'affaire, mais le problème de recadrage subsiste. On dirait une autre question alors ...

Heres mon CSS révisé

#site-navigation li { 
    background-image:url(../img/site-nav-seperator.gif); 
    background-position:0 4px; 
    background-repeat:no-repeat; 
    float:left; 
    padding-left:15px; 
} 
#site-navigation li.first { 
    background-image:none; 

} 

plus d'édition:

Managed pour fixer le recadrage aussi, en donnant la balise une hauteur de ligne.

#site-navigation a { 
    color:#666666; 
    display: block; 
    text-decoration:none; 
    margin-right: 1em; 
    line-height: 1.1em; 
} 

ce bit se sent comme un Bodge bien :)

+0

Pour ceux d'entre nous sans IE6, il peut être utile de décrire ce qui se passe dans IE6, car «ça ne marche pas» est plutôt vague. –

+0

Désolé, j'ai mis à jour post et inclus une capture d'écran. –

Répondre

3

Je sais que ce n'est pas vraiment une solution, mais je vous conseille d'utiliser background-image au lieu de image liste de style. Vous obtiendrez le même effet et il fonctionnera dans tous les navigateurs.

+0

J'ai édité ma question en réponse à vos conseils –

1

Cela ressemble à un problème avec les marges et les paddings de vos objets à l'intérieur du site-navigation.

Si vous montriez votre CSS pour ces éléments, nous pourrions vérifier plus rapidement :)

3

Voici un excellent article sur les listes de style: http://www.alistapart.com/articles/taminglists/

Il a beaucoup d'exemples/captures d'écran de la façon dont les différents navigateurs rendent listes. Il devrait répondre à toutes vos questions et ensuite certaines. :)

+0

Merci, je vais rester coincé dans;) –

Questions connexes