css background doesn't show up in ie 6 when using rules like #id.class

Question

i'm making a splash image div that changes the background with different css class, here's rules i defined:

#splash {
    height: 130px;
}

#splash.homepage { 
    background: #F7EECF url("images/splash_home.png") no-repeat 0 0 scroll; 
}
#splash.projectspage { 
    background: #F7EECF url("images/splash_projects.png") no-repeat 0 0 scroll; 
}

this works fine in firefox and chrome, but the background somehow doesn't show up in ie 6. The weird thing is, it works for the homepage class but not the projectspage class. so ie 6 seems to interpret these almost identical rule differently. i tried clear the cache, didn't help. i'm quite new to css and ie 6 hacks, so am i missing anythings here?

also another problem that's slightly related to this, it seems it doesn't work in firefox when there is space before the class, like "#splash .homepage", but somehow i see other people's websites using the css with a space. what could be the problem?

update: i tried to reverse the order of the #splash.homepage and #splash.projectspage, then now projectspage works but not the homepage. It seems whatever is immediately followed by #splash is used.

here are some relevant css & htmls:

#splash {
    height: 130px;
}

#splash.projectspage { background: #F7EECF url('images/splash_projects.png') no-repeat 0 0 scroll; }
#splash.homepage { background: #F7EECF url('images/splash_home.png') no-repeat 0 0 scroll; }
#splashtext {
    padding: 53px;
    height: 40px;
    width: 450px;
}

#splashtext h2 {
    color: #FFFFFF;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: normal;
    font-style: italic;
}

#splashtext p {
    color: #FFFFAA;
    font-family: Calibri, Arial, san-serif;
    font-size: 14px;
    font-weight: normal;
    margin-top: 10px;
    font-style: italic;
}


<!-- splash, this one does not show -->
<div id="splash" class="homepage">
    <div id="splashtext">
        <h2>some header</h2>
        <p>some description</p>
    </div>
</div>

<!-- splash, this one shows -->
<div id="splash" class="projectspage">
    <div id="splashtext">
        <h2>some other header</h2>
        <p>some other description</p>
    </div>
</div>

Answer 1

Try taking out the quotes around your URLs in the background specifiers, or changing them to single quotes.

Answer 2

Why are you worried about ie6? Anyway it works in ie7 and ie8. Are you sure that is not a problem with png? Try with a jpg or gif image.

Answer 3

It's possible you're having an issue with the .png image files. IE6 cannot handle the transparency layer that is part of .png images, it simply renders any pixel with a transparent marker as a grey background.

As for the second part of your question, #splash.background is a significantly different rule than #splash .background. The first one (no space) refers to the element with id splash that also has a background class. The second rule (with a space) refers to any element of class background that is a child of the element with id splash. Subtle, but important difference.

Answer 4

I would bet that the problem is specifically to do with the IE6 misshandling of .pngs To test, try replacing these graphics with a gif or jpg and check to see if the selectors are working correctly.

Once you've identified that it is a problem with pngs try using the Supersleight jQuery plugin.

Answer 5

I think using min-height property will sometimes work.

Try the below code.

#splash {
    min-height:130px; /* first */
    height:auto !important; /* second */
    height: 130px; /* third */
}

#splash.homepage { 
    background: #F7EECF url("images/splash_home.png") no-repeat 0 0 scroll; 
}
#splash.projectspage { 
    background: #F7EECF url("images/splash_projects.png") no-repeat 0 0 scroll; 
}

Note: Please use the same order of css in #splash selector.

Answer 6

(I guess your projectspage is under a sub-directory of home-page?)

Try using absolute paths to each image in the CSS (eg. url("/images/splash_projects.png")) - it chould be that IE6 resolves images relative to the containing page instead of the CSS file (depends whether your CSS is inline or in an external file I suppose.)

Answer 7

IE6 does not support multiple combined selectors to select elements (#id.class or .class.class, etc). IE6 will ONLY recognize the last class/ID in your chain.

Details and example

However, in this case, as long as you only have .homepage and .projectspage on one element on the page, the background image should be showing up on the correct element.

I noticed that you are probably using .homepage and .projectspage to differentiate between two PAGES and the same ELEMENT on those different pages. A good practice is to put the class on the <body> element so you can use it to differentiate each page and their descendants.

<body class="homepage">
    <div id="splash">

Then your CSS would be:

body.homepage div#splash { blah }

body.projectspage div#splash { blah }

Added benefit: you can now target any elements on a per page basis, not just the ones that you add ".homepage" or ".projectspage" to.

Answer 8

I've got the same problem, and it's not PNGs. e.g.

column2menu li { border-bottom : 1px solid;}

column2menu li.goats { border-bottom-color : brown;}

...works in IE6, but...

td#menu { background-repeat:no-repeat; background-position:bottom right;} td#menu.goats { background-image : url(../images/goats.jpg);} ...doesn't.

But I found a solution for ie6 that works so far in FF, i.e.: .tdgoats { background-repeat:no-repeat; background-position:bottom right; background-image : url(../images/goats.jpg);} ...so you use: ...and ie6 is happy

Thsi post looks OK where I'm typing it, but the preview in the blue box is a bit odd. Somehow lines 2 and 3 got <h1>'d