IE6 Not Rendering div Backgrounds

Question

Page in question: http://secantmedical.com/biomedical-textiles/biomedical-textiles.php

The heading area with the words "Biomedical Textiles" is set very simply with a CSS class that mirrors the page name, in this instance the class is "biomedical-textiles". Other examples include "medical-applications", "design-and-development", etc. You get the gist.

Exclusively in IE6, every main page after Biomedical Textiles has a blank heading area. The dimensions are kept in place, but the background is not being applied. The same is true for all subpages. The first child of Biomedical Textiles, Textile Science, has the header applied correctly and all other subpages have a blank heading area.

I can vouch simply by viewing the source that the classes are being applied correctly; couple that with the fact that the headings appear fine in every other browser. In the CSS file, the classes that are working appear first in their respective groups. When I swap one of the later ones to the top, that one works and every proceeding one does not. I have no idea why this is. Any assistance would be greatly appreciated.

The CSS in question is on lines 83-123 of style.css. Thanks in advance!

Answer 1

The way you have your selector written in your CSS written for those bg images, ie6 doesn't recognize it. You have it written:

#l2-header.medical-applications { background: url('../graphx/l2-medical.jpg') no-repeat; }

It doesn't recognize the id.class. If you aren't using the class anywhere else just use the class without the id in front of it. Just use:

.medical-applications { background: url('../graphx/l2-medical.jpg') no-repeat; }

That should fix it.