Welcome to WebmasterWorld Guest from 54.205.74.11

Forum Moderators: not2easy

Background image not displaying in IE6

   
7:10 am on Aug 15, 2009 (gmt 0)

5+ Year Member



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

8:27 am on Aug 15, 2009 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

3:22 pm on Aug 15, 2009 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



An alternative might be that IE7.js teaches IE6 how to do multiple classes (not sure if it works for ID+class selectors.
3:38 pm on Aug 15, 2009 (gmt 0)

5+ Year Member



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.
6:06 pm on Aug 15, 2009 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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]
7:10 pm on Aug 15, 2009 (gmt 0)

5+ Year Member



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 :)

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month