[jvbates]

Guys,

I'm having a problem with a background-image being applied to a header div in IE6! The DIV has an ID of masthead, and a unique class applied to it depending on which section the page sits in...

THE XHTML
----------------------------------------------
<div id="masthead" class="mast-au"><a href="index.php" title="Workplace Giving homepage"><img id="logo" src="img/global/wpg_logo.gif" alt="Workplace Giving logo" width="223" height="90" /></a></div>


THE CSS
----------------------------------------------
.mast-ho#masthead { background: #fff url(../img/masts/mast_ho.jpg) no-repeat 0% 0%; }

/*THIS IS THE ONE THAT SHOULD BE APPLIED*/
.mast-au#masthead { background: #fff url(../img/masts/mast_au.jpg) no-repeat 0% 0%; }

.mast-pg#masthead { background: #fff url(../img/masts/mast_pg.jpg) no-repeat 0% 0%; }

.mast-ei#masthead { background: #fff url(../img/masts/mast_ei.jpg) no-repeat 0% 0%; }

.mast-fa#masthead { background: #fff url(../img/masts/mast_fa.jpg) no-repeat 0% 0%; }

.mast-ne#masthead { background: #fff url(../img/masts/mast_ne.jpg) no-repeat 0% 0%; }

.mast-cu#masthead { background: #fff url(../img/masts/mast_cu.jpg) no-repeat 0% 0%; }

The problem is, that IE6 doesn't apply the background-image, every other browser on Mac & PC get it OK!! I can't understand it - anyone got any ideas?

Jay

[pgo]

This doesn't make sense to me - .mast-au#masthead - why not just give each page's masthead a different class and forget the ID??

Try removing the IDs...see if that does anything...

[Dusteh]

I'm guessing IE is being confused by the ID tag within the HTML. ID always overrides a class, but it might not be able to see the ID within your CSS because its nested after the class titles. Not sure why it wouldn't then read the class tag - but I guess its another IE bug.

Either way pgo is correct, there is no need for the ID tag at all?

[stickmus]

Someone else had a similar problem a while back, think they ended up putting an id on the body in the end.

[emil]

link?

try the other way around
#masthead.whateverClass {blah}