IE6 fond misaligned

Question

J'ai IE6.

[EDIT: vous pouvez voir le modèle en direct ici: http://themeforest.net/item/aqua-terra-lava-html-blog-portfolio-/full_screen_preview/53209]

J'ai un modèle, avec 3 <a></a> qui changent la position de leur arrière-plan pour créer un effet de bouton.

C'est à quoi il ressemble dans tout navigateur

Any Browser http://i45.tinypic.com/2s7vome.png

C'est avec IE6:

IE6 http://i48.tinypic.com/2mmsbxu.png

Ce code CSS:

 
#featured-nav { 
    width: 944px; 
    height: 131px; 
    background: url(/images/site/shadow.gif) bottom center no-repeat; 
} 
#featured-nav a { 
    height: 35px; 
    float: left; 
    cursor: pointer; 
    display: block; 
    padding: 47px 20px 20px 120px; 
    font-size: 12px; 
    line-height: 16px; 
    text-decoration: none; 
    font-weight: normal; 
    color: #777; 
} 
#featured-nav a span { 
    margin-top: 10px; 
    height: 30px; 
    width: 150px; 
    font-size: 12px; 
    text-transform: uppercase; 
    color: #5aa0b1; 
    font-weight: bold; 
    position: absolute; 
    top: 12px; 
    left: 120px; 
} 
#featured-nav a img { 
    position: absolute; 
    left: 40px; 
    top: 23px; 
} 
#featured-nav a.left { 
    background: url(/images/site/leftbutton.png) top left no-repeat; 
    width: 178px; 
    overflow: hidden; 
    position: relative; 
} 
#featured-nav a.left:hover, #featured-nav a.left.activeSlide { background: url(/images/site/leftbutton.png) bottom left no-repeat; } 

#featured-nav a.middle { 
    background: url(/images/site/middlebutton.png) top left no-repeat; 
    width: 174px; 
    overflow: hidden; 
    position: relative; 
} 
#featured-nav a.middle:hover, #featured-nav a.middle.activeSlide { background: url(/images/site/middlebutton.png) bottom left no-repeat; } 
#featured-nav a.right { 
    background: url(/images/site/rightbutton.png) top left no-repeat; 
    width: 172px; 
    overflow: hidden; 
    position: relative; 
} 
#featured-nav a.right:hover, #featured-nav a.right.activeSlide { background: url(/images/site/rightbutton.png) bottom left no-repeat; } 
.content-wrapper { 
    width: 678px; 
    overflow: hidden; 
    margin-top: 10px; 
    margin-left: 8px; 
} 

Toute idée ?

Merci.

Answer 1

IE 6 ne peut pas comprendre plusieurs classes sur un élément correctement donc je vous suggère de mettre l'

#featured-nav { 
    width: 944px; 
    height: 131px; 
    background: url(/images/site/shadow.gif) bottom center no-repeat; 
} 

que la dernière règle dans le CSS si IE 6 ramasse derniers ..

Vous devez faire face à des problèmes similaires ailleurs ..

Pour être sûr soit créer des boutons d'arrière-plan complet (le bouton entier dans une image)/créer plusieurs éléments pour définir chaque côté du bouton/ou scrap IE 6 ...

[EDIT] ne s'applique pas à votre cas .. ferraille ma suggestion ..

comme alternative, vous pouvez vous renommer sélectionné des classes et au lieu d'utiliser deux comme left.activeSlide ont un nom left_activeSlide .. .

[EDIT 2] ici est un code pour le modèle spécifique que vous avez mentionné dans votre commentaire

ils utilisent le plug-in du cycle, et dans le fichier cycle.js (à la fin) ils ont le INITIALISA code tiel qui est

function onBefore(){ 

var slide = $(this).attr('id'); 

$('#featured-nav ul li.activeSlide').removeClass('activeSlide'); 

$('#featured-nav ul li#' + slide).addClass('activeSlide'); 

} 

maintenant si vous changez à

function onBefore(){ 

var slide = $(this).attr('id'); 

$('#featured-nav ul li.'+slide+'activeSlide').removeClass('leftactiveSlide rightactiveSlide middleactiveSlide'); 

$('#featured-nav ul li#' + slide).addClass(slide+'activeSlide'); 

} 

il travaillerait avec les classes nommées leftactiveSlide, middleactiveSlide rightactiveSlide

Answer 2

Vous pouvez ajouter un affichage: en ligne aux éléments flottants. Cela n'affecte pas les autres navigateurs, mais empêche IE de doubler les marges sur l'élément.

Answer 3

Je crois que le IE6 a des problèmes avec le fond de positionnement certaines PNGs . Tout comme un test, vous devez essayer de remplacer l'image par un fichier JPG ou PNG non transparent.