IE6 background misaligned

Question

I have IE6.

[ EDIT : you can see the template live here: http://themeforest.net/item/aqua-terra-lava-html-blog-portfolio-/full_screen_preview/53209 ]

I have a template, with 3 <a></a> that change the position of their background to create a button effect.

This is how it looks in any browser

This is it with IE6:

This the CSS code:

#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;
}

Any idea?

Thank you.

Answer 1

IE 6 cannot understand multiple classes on an element correctly so i would suggest you put the

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

as the last rule in the CSS so IE 6 picks it up last ..

you are bound to face similar problems elsewhere though ..

To be sure either create full background buttons (the whole button in one image) / create multiple elements to define each side of the button / or scrap IE 6 ...

[EDIT] it does not apply to your case .. scrap my suggestion ..

as an alternative, you can rename you selected classes and instead of using two like left.activeSlide have one named left_activeSlide ...

[EDIT 2] here is some code for the specific template you mentioned in your comment

They use the cycle plugin, and in the cycle.js file (at the end) they have the initialization code which is

function onBefore(){

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

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

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

}

now if you change it to

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

}

it would work with classes named leftactiveSlide, middleactiveSlide rightactiveSlide

Answer 2

You might want to add display:inline to the floated elements. This doesn't affect other browsers, but prevents IE from doubling margins on the element.

Answer 3

I believe the IE6 has issues with background-positioning certain PNGs. Just as a test, you ought to try replacing the image with a JPG or non-transparent PNG.