4 replies [Last post]
greenstork
Offline
Regular
Last seen: 16 years 6 days ago
Joined: 2003-07-16
Posts: 16
Points: 0

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]

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 3 years 24 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

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!

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

DJSdotcom
Offline
Enthusiast
Rochester, NY / Chicago, IL
Last seen: 16 years 17 weeks ago
Rochester, NY / Chicago, IL
Joined: 2003-03-23
Posts: 95
Points: 0

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 Wink

-Mike

</twocents>

Anonymous
Anonymous's picture
Guru

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.

greenstork
Offline
Regular
Last seen: 16 years 6 days ago
Joined: 2003-07-16
Posts: 16
Points: 0

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