Home/ Questions/Q 330255
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T09:39:51+00:00

i’m making a splash image div that changes the background with different css class,

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0