homepage Welcome to WebmasterWorld Guest from 54.211.97.242
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Background image not displaying in IE6
vikasvrao

5+ Year Member



 
Msg#: 3972395 posted 7:10 am on Aug 15, 2009 (gmt 0)

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

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



 
Msg#: 3972395 posted 8:27 am on Aug 15, 2009 (gmt 0)

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

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



 
Msg#: 3972395 posted 3:22 pm on Aug 15, 2009 (gmt 0)

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

vikasvrao

5+ Year Member



 
Msg#: 3972395 posted 3:38 pm on Aug 15, 2009 (gmt 0)

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

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



 
Msg#: 3972395 posted 6:06 pm on Aug 15, 2009 (gmt 0)

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

5+ Year Member



 
Msg#: 3972395 posted 7:10 pm on Aug 15, 2009 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved