Background image not displaying in IE6

[vikasvrao]

hi guys,
I'm trying to display this div but the background image doesnt come up in IE 6.

<div id="mainContentBlock1" class="ver1">
<h2>Fun, fast & smart<br>gift card auctions</h2>
<p>
Always get more than you pay for!<br>
Win up to 100% free cash bonus.
</p>
</div>

#mainContentBlock1 {
background: white no-repeat bottom right;
height:300px;
width:700px;
}

#mainContentBlock1.ver1 {background-image:url(../images/homepage/splash/splash01.jpg);}

Works fine in all other browsers, something I am missing which is IE 6 specific? what can I change? Thanks guys smile.gif

[SuzyUK]

IE6 doesn't support the multi-class notation

#mainContentBlock1.ver1

so you might need to do it so that the class itself works without the ID attached, I take it you're doing it like this because the main content block needs different pictures?

anyway try:

#mainContentBlock1 {
background-color: white;
background-repeat: no-repeat;
background-position: bottom right;
height:300px;
width:700px;
}

.ver1 {
background-image:url(../images/homepage/splash/splash01.jpg);
}

I'm not sure if the background properties need split like that above on the ID as I'm running from memory, but I'm guessing so to allow the lesser specificity of the class to also apply to the same div

give it a try and let us know..

[swa66]

An alternative might be that IE7.js teaches IE6 how to do multiple classes (not sure if it works for ID+class selectors.

[vikasvrao]

That didnt work :(. All the images are about 300 * 300 and the div is 700 px wide and the text content is aligned to the left of the image. I dont see why the image wouldnt show up.

[SuzyUK]

hmm.. found this explantion [sonspring.com] (called multi class, but should be #id.class bug)

..anyway removing the ID from the background-image rule should work, according to that, and yes you would need to separate out the shorthand rule on the ID or it will still be ignored - but reading something else on there indicates that adding !important to the class rule should help the specificity thing too.

so you could try adding !important to the background-image rules too

.ver1 {
background-image:url(../images/homepage/splash/splash01.jpg) !important;
}

or alternatively add another class to the mix to test if it is the specificity and see if it is one these bugs.

<div id="mainContentBlock1" class="mainc ver1">
<h2>Fun, fast & smart<br>gift card auctions</h2>
<p>your text here</p>
</div>

.mainc {
background-color: white;
background-repeat: no-repeat;
background-position: bottom right;
height:300px;
width:700px;
}

.ver1 {
background-image:url(../images/homepage/splash/splash01.jpg);
}

haven't come across this much I think because most avoid it because of the IE6 confusion, if you use the multi class notation (rather than the ID and class)

.mainc.ver1 {}

IE6 will possibly still have problems with that too as there is a similar multi class bug [quirksmode.org]

[vikasvrao]

SuzyUK, you are the best! :)
What worked was a combination of the above 2 solutions, so I ended up doing:
.mainc {
background-color: white;
background-repeat: no-repeat;
background-position: bottom right;
height:300px;

width:700px;
}

#ver1 {background-image:url(splash/splash01.jpg) !important; }

I iz happy :)