Databases
StackOverflow2013
Postsdbo
POcss background doesn't show up in ie 6 when using rules like #id.class
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POcss background doesn't show up in ie 6 when using rules like #id.class
    text
    copied!<p>i'm making a splash image div that changes the background with different css class, here's rules i defined:</p> <pre><code>#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; } </code></pre> <p>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?</p> <p>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?</p> <p><strong><em>update:</em></strong> 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.</p> <p>here are some relevant css &amp; htmls:</p> <pre><code>#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; } &lt;!-- splash, this one does not show --&gt; &lt;div id="splash" class="homepage"&gt; &lt;div id="splashtext"&gt; &lt;h2&gt;some header&lt;/h2&gt; &lt;p&gt;some description&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- splash, this one shows --&gt; &lt;div id="splash" class="projectspage"&gt; &lt;div id="splashtext"&gt; &lt;h2&gt;some other header&lt;/h2&gt; &lt;p&gt;some other description&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload