IE6 фон смещен

Question

У меня IE6.

[ РЕДАКТИРОВАТЬ : вы можете увидеть шаблон вживую здесь: http://themeforest.net/item/aqua-terra-lava-html-blog-portfolio-/full_screen_preview/53209]

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

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

Вот и все с IE6:

Это код 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 выбирает его последним ..

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

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

[РЕДАКТИРОВАТЬ] это не относится к вашему делу .. отменить мое предложение ..

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

[РЕДАКТИРОВАТЬ 2] вот код для конкретного шаблона, который вы упомянули в своем комментарии

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

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 RighttactiveSlide

Answer 2

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

Answer 3

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