Go to my site. See the little white carat underneath my name that connects it with the page content below? Now go to Portfolio or Articles - the carat changes to grey to blend in with the submenu.
The way I do this is very simple - I have two different classes, each specifying a different image, and I apply the one I need for that page to the #header div:
That's a selector that has both an ID and a class on it... I almost never ever do that, and I can't even remember why, but now that you bring this up, I'm sure it's because IE 6 just doesn't recognize selectors like that.
That's a selector that has both an ID and a class on it... I almost never ever do that, and I can't even remember why, but now that you bring this up, I'm sure it's because IE 6 just doesn't recognize selectors like that.
IE does recognize it though, because it reads the background image from #header.root. It just doesn't read #header.submenu, which is identical (other than the class name and the image it points to). I'll bet if I switched the order and put #header.submenu first, it would read that one and ignore #header.root (I should try that as a test).
I wrote it that way originally because it's more specific - that way if I use .submenu elsewhere, I can still use the same class name here but give it different styles if it's applied to #header.
I've even done stuff like #header.root.selected and it works in IE6, so I don't see what the problem is here. Unless it's just a genuine bug in the parser.
Go to my site. See the little white carat underneath my name that connects it with the page content below? Now go to Portfolio or Articles - the carat changes to grey to blend in with the submenu.
The way I do this is very simple - I have two different classes, each specifying a different image, and I apply the one I need for that page to the #header div:
.root {background: url('images/carat_white_up.jpg') center bottom no-repeat;
}
.submenu {
background: url('images/carat_grey_up.jpg') center bottom no-repeat;
}
Here's the IE6 bug. Originally, I wrote the CSS like this:
#header.root {background: url('images/carat_white_up.jpg') center bottom no-repeat;
}
#header.submenu {
background: url('images/carat_grey_up.jpg') center bottom no-repeat;
}
If I do that, IE6 will not display the .submenu image. It just won't do it. Every other browser (including IE7 and up) will, like it should.
That has to be a legit bug, right? That makes absolutely no sense. Anyone ever encounter this before? :shock:
#header.submenu
That's a selector that has both an ID and a class on it... I almost never ever do that, and I can't even remember why, but now that you bring this up, I'm sure it's because IE 6 just doesn't recognize selectors like that.
IE does recognize it though, because it reads the background image from #header.root. It just doesn't read #header.submenu, which is identical (other than the class name and the image it points to). I'll bet if I switched the order and put #header.submenu first, it would read that one and ignore #header.root (I should try that as a test).
I wrote it that way originally because it's more specific - that way if I use .submenu elsewhere, I can still use the same class name here but give it different styles if it's applied to #header.
I've even done stuff like #header.root.selected and it works in IE6, so I don't see what the problem is here. Unless it's just a genuine bug in the parser.