IE6 background misaligned

Question

У меня есть IE6.

[EDIT: вы можете видеть шаблон здесь жить: http://themeforest.net/item/aqua-terra-lava-html-blog-portfolio-/full_screen_preview/53209]

У меня есть шаблон, с 3 <a></a>, что изменить положение их фона для создания кнопки эффекта.

Вот как это выглядит в любом браузере

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

Это его с IE6:

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

Этот код 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; 
} 

Любая идея ?

спасибо.

Answer 1

IE 6 не может понять несколько классов на элемент правильно так я хотел бы предложить вам поставить

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

в качестве последнего правила в CSS так IE 6 поднимает его последний ..

вы сталкиваетесь с аналогичными проблемами в других местах, хотя ..

Чтобы убедиться, что вы создаете полные кнопки фона (вся кнопка на одном изображении)/создайте несколько элементов, чтобы определить каждую сторону кнопки/или scrap IE 6 ...

[EDIT] это не относится к вашему делу .. лом моего предложения ..

в качестве альтернативы, вы можете переименовать выбранные классы и вместо того, чтобы использовать два как left.activeSlide имеет один названный left_activeSlide .. .

[EDIT 2] здесь есть некоторый код для конкретного шаблона вы упомянули в своем комментарии

они используют плагин цикла, и в файле cycle.js (в конце), они имеют initializa Тион код, который

function onBefore(){ 

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

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

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

} 

теперь, если вы измените его на

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'); 

} 

он будет работать с классами имени leftactiveSlide, middleactiveSlide rightactiveSlide

Answer 2

Возможно, вы захотите добавить отображение: встроенный в плавающие элементы. Это не влияет на другие браузеры, но не позволяет IE удваивать поля на элементе.

Answer 3

Я считаю, что IE6 имеет проблемы с фоном-позиционирования определенных в формате PNG , Как тест, вы должны попробовать заменить изображение на JPG или непрозрачный PNG.