user3068522
user3068522

Reputation: 153

CSS Background no working on IE6

I have toggle tabs that when on click the background changes when active(I am using sprite). The problem is that the background doesn't change immediately, I still need to hover it to apply the changes. I think that using background or background-image is the problem because when I try using background-color, it works fine. This problem only occurs on IE6.

    $('#menu a').click(function(e) {
        e.preventDefault();
        $('a.selected').removeClass('selected');
    });



#menu-tabs ul li a {
    color: #000;
   background-image: url(../images/sprite.png) 0 20px no-repeat;
}

#menu-tabs ul li a.selected {
    color: #05416B;
    background-image: url(../images/sprite.png) 0 0 px no-repeat;
}

Upvotes: 0

Views: 118

Answers (2)

Tieson T.
Tieson T.

Reputation: 21191

You have syntax errors in your rules; try correcting those first.

#menu-tabs ul li a {
    color: #000;
   background: url(../images/sprite.png) 0 20px no-repeat;
}

#menu-tabs ul li a.selected {
    color: #05416B;
    background: url(../images/sprite.png) 0 0 no-repeat;
}

background-image only supports image URL(s) (depending on browser; not all support multiple images). I suspect that, if your rules work on other browsers, then those browsers are simply normalizing your rules to the shorthand shown.

Upvotes: 2

Akshay Arora
Akshay Arora

Reputation: 1945

Internet Explorer 6 has LOTS and LOTS of CSS bugs! Now, coming to your question, Why background color works and why background image doesn't work. Color is something that the browser has in itself implicitly but it has to explicitly "load" images or other stuff. Well, with IE6, its a total guess work here. I will recommend you to visit this site, http://positioniseverything.net/ They have a very comprehensive list of IE6 bugs. You may also visit the official Microsoft website on CSS compatibility. http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

If you are still having problems, post a link to your actual page. Hope this helps.

Upvotes: 1

Related Questions