IE6 Issue and Background Images

[tambrab2007]

Hello,

I'm currently working on a test site; http://www.girlstech.org, which I'm having issues with in IE6.

The home page works fine, but the background images on all the subpages is giving me fits.

Each subpage is to have it's own background image that is to be located on the left with content in the middle and the nav menu on the right. Everything is layed out just fine, but it isn't rendering the correct background images.

The only page that displays the correct image is on the Print Production page. All the other subpages display the default image (contact2.jpg) instead of their own image.

The code below works perfectly in IE7 and Firefox, so the issue is only with IE6. This isn't a huge thing, but I would like to get it fixed.

Any help is appreciated.

Here is the css code:

[CODE]
#image2 { background-image: url('images/contact2.jpg'); background-position: top; background-repeat: no-repeat; margin: 0 8px 0 0; border: 0; float: left; clear: left; width: 150px; height: 300px; }

#image2.image-20 { background-image: url('images/print-production.jpg'); background-position: 0 0; background-repeat: no-repeat; margin: 0 6px 0 0; border: 0; float: left; clear: both; width: 150px; height: 300px; }

#image2.image-13 { background-image: url('images/project-management.jpg'); background-position: 0 0; background-repeat: no-repeat; margin: 0 6px 0 0; border: 0; float: left; clear: both; width: 150px; height: 300px; }

#image2.image-30 { background-image: url('images/interactive-media.jpg'); background-position: 0 0; background-repeat: no-repeat; margin: 0 6px 0 0; border: 0; float: left; clear: both; width: 150px; height: 300px; }

#image2.image-26 { background-image: url('images/process-development.jpg'); background-position: 0 0; background-repeat: no-repeat; margin: 0 6px 0 0; border: 0; float: left; clear: both; width: 150px; height: 300px; }

#image2.image-75 { background-image: url('images/clients-testimonials.jpg'); background-position: 0 0; background-repeat: no-repeat; margin: 0 6px 0 0; border: 0; float: left; clear: both; width: 150px; height: 300px; }

[simcomedia]

I think what you have there is a conflict between #id and .classes.

An 'id' needs to be unique in name, meaning there can only be one #image2

A class is something you can assign 1000 times in the same page if you wish and get the same results

IE6 is probably having a conflict with the fact that all of your image codes start with #image2. Try getting rid of the classes you've assigned them and change the id's to either numerical sequence (#image2, #image3, #image4, etc.) or named after the page (#aboutimage, #servicesimage, etc.) so they are unique.

This should fix your IE6 issue.