[cam]

#someid.class1 { .. }
#someid.class2 { .. }

IE doesn't seem to like this and only plays ball when you resort to:

.class1 { .. }
.class2 { .. }

Any/All known workarounds/fixes would be welcomed

[pgo]

Originally Posted by i_am_cam

#someid.class1 { .. }
#someid.class2 { .. }

Does that even validate? Don't think I've ever seen that before...

Did you try...

#someid XXX.class {...}

Or are you applying an ID and a CLASS to an HTML element? Not sure if that's "kosher" (not to mention necessary)...I'd have to look it up.

It's exactly this sort of situation that makes me try to avoid classes (as in CSS classes ) - I just try to use nested IDs as much as possible. Sometimes you can't escape it, though.

[cam]

Originally Posted by pgo

Or are you applying an ID and a CLASS to an HTML element? Not sure if that's "kosher" (not to mention necessary)...I'd have to look it up.

Yes i'm applying an id and a class to an element, and it's both necessary & a valid technique

i'm just wondering if anyone's managed to get this working in IE

[d*d]

#idname .classname { }
seems to play if there is a space between the two

[smallbeer]

yeah you need a space inbetween don't you cam?

[stickmus]

I see what you're doing.

Seems to only take the first definition. A quick and easy workaround is to use a double class instead of an id so:
.test.test2 {
background:#0F0;
color:#fff;
}
.test.test1 {
background:#000;
color:#fff;
}

with

<div class="test1 test">test</div>
<div class="test2 test">test</div>

works just as you want. Not sure that helps though, does it need to be an ID?.

[cam]

<div id="header" class="home">..</div>
..
<div id="footer" class="home">..</div>

#header {
 ....
	}
#header.home {
	border-top: 5px solid #339886;
	background: url(images/head-home.jpg) #E0EAF4 no-repeat;
	}
#footer {
...
	}
#footer.home {
	border-top: 5px solid #339886;
	}

That's an example of what I was wanting to achieve, where there could be N amount of subclasses of #header and #footer. SB; both formats are valid (with/without a space) and fwiw neither work in IE, the Fox works with the way i've got it above. stickmus, cheers for the suggestion but double-classes doesn't allow me to reuse the same class name at different stages of my document and for different purposes which was my intention.

[smallbeer]

what you're doing does seem to work in IE for me, at least I think I understand what you're trying to do. However...

Aren't you really just overwriting #header with #header.home?

In that case would it be easier, rather than writing class="home" in the header, footer or where ever divs, to just give the body an individual class?

That way you could have .home #header { ... } or .otherpage #header { ... }.

it's officially friday night now though.

[cam]

giving the body a class.

i knew there'd be an easy way round this.

sb, i owe you a beer, and aye enjoy the weekend, i'm off to start getting drunk in 20 minutes

[smallbeer]

everything should be made easier on a friday.

I'm off to start making the girlfriend's tea in 20 minutes

[pgo]

This made me slap my forehead. Your CSS...

#someid.someclass { }

...confused me as it looked like you were trying to apply a class to an ID. I saw that and I thought, "Huh?".

And then I realized I'm using the same thing on my site!!!

<div id="content" class="home">
<div id="content" class="resume">

...and so on.

The lack of a space between #someid and .someclass confused me to no end. I guess I thought you were trying to apply a class to the ID and not the element.

Putting a space between the two should be fine.

Silly me.

[Brooklyn]

IE does have a parsing issue with this when using javascript to pass style values at any point say for colour switching! Other than that, I've never had an issue with #id.class

Isn't this where specifity/cascade comes in?

#id
.class {}
element#id {}
element.class {}
element#id.class {}
html>element#id.class {}
html>element#id.class [type=attribute] {}

Though today I discovered:

*{...}