Wed, 2003-07-16 06:59
I have up until this point been designing a website and testing on a Mac. My pages check out under all the major mac browsers including IE and Mozilla. However, I am having trouble with some bg-images. Here is the XHTML transitional in question:
<div id="subMenu" class="help">
<h3><span>How You Can Help</span></h3>
</div>
and here is the corresponding CSS:
#subMenu {
border-top:1px solid #999;
width: 410px;
}
#subMenu h3 {
border-bottom:1px solid #999;
height: 60px;
}
#subMenu.about {background: url("../about/images/bg_about.jpg") no-repeat;}
#subMenu.help {background: url("../help/images/bg_help.jpg") no-repeat;}
It is IMPORTANT to no that these #subMenu classes continue for 10 different backgrounds at least. The bug is that only the first one on the list renders in IE6. Does IE6 not like a <div class="">? Is there any other way around this other than renaming all of these divs?
Here is the link to two pages that illustrate the problem:
http://www.esw.org/test/about/index.html
http://www.esw.org/test/giving/index.html
Notice the missing header in the middle top of the second page in IE6.[/url][/list]
Wed, 2003-07-16 07:42
#1
IE6 not rendering bg-images
It's to do with mixing IDs and CLASSes in one CSS statement. IE obviously chokes on it. Take out the #subMenu and it'll work.
Another (minor, picky) thing is that id's should be used for unique things, and classes for general things. It really makes no difference but some would argue you should have <...class="submenu" id="help"...>
That way the unique id's don't need to have the class associated with them, since they should be unique!
Thu, 2003-07-17 13:54
#2
IE6 not rendering bg-images
Another thing that pisses off IE is using double-quotes inside your url string for the background image... try this:
background: url(../about/images/bg_about.jpg) no-repeat;
I wrestled with stupid problems like this for weeks on end for some sites, but the good thing is that once you figure them out, you always remember 
-Mike
Thu, 2003-07-17 18:06
#3
IE6 not rendering bg-images
It's also good practice to declare classes before IDs, if you think about it makes sense, because hierarchially (sp), IDs are there to add/override new stuff to the inherited classes.
Thu, 2003-07-17 18:52
#4
Thanks!
Thank you for the tips all. I am modifying the XHTML accordingly but in the mean time I have removed the id from the style sheet and I am only listing the classes. It all works great now, thanks again.
-Dave