I'm having a huge issue with IE6:

I have 2 divs with the same ID but different classes on 2 different pages:

<div id="sub_images" class="services_ocean"></div>
and
<div id="sub_images" class="services_transload"></div>

They share a common CSS file:

#sub_images {
	width: 325px;
}

#sub_images.services_ocean  {
	background-image: url("sub_images_services_ocean.jpg");
	height: 460px
	}

#sub_images.services_transload  {
	background-image: url("sub_images_services_transload.jpg");
	height: 430px
	}

When loaded, the services_ocean div shows its background and the services_transload shows nothing. If I switch the 2 selectors in the CSS file and put the services_transload selector before the services_ocean, then the transload page works and the ocean page shows nothing.

Here are working links:
http://www.siriusad.com/ietest/ocean.html
http://www.siriusad.com/ietest/transload.html

and the CSS file is here:
http://www.siriusad.com/ietest/screen.css

Can anyone tell me why this is happening or help me find a work-around? This works fine in Safari and FF.

God IE is such a piece of crap!

The problem might be in using the same ID more than once. IDs are really a one time thing, though I have seen pages work with two elements having the same ID. They shouldn't though.

Would switching sub_images to a class work? Seems you're using it more as a class anyway.

After looking around some more I found this:
http://sonspring.com/journal/ie6-multi-class-bug

I just removed the ID from the selector and gave the class a unique name and it seems to work. I was trying to streamline things. Thanks for the suggestions.

Glad to help.