homepage Welcome to WebmasterWorld Guest from 54.227.171.163
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
IE6 and cascading - an issue I've never seen
moltar

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3564817 posted 4:24 pm on Feb 2, 2008 (gmt 0)

I am pretty sure I've done this before and it worked. What the hell is going on here?

Notice how the border color does not cascade. It remains at the default black color. If you remove the div#message.info{} declaration, then the border color cascades down and becomes red. So it's as if the .info one is blocking the .error one somehow.

CSS:

div#message {
border-width: 5px;
border-style: solid;
}
div#message.info {
border-color: green;
}
div#message.error {
border-color: red;
}

HTML 4.01:

<div id="message" class="error">An error message</div>

 

jessejump

5+ Year Member



 
Msg#: 3564817 posted 1:59 pm on Feb 3, 2008 (gmt 0)

>>>> div#message.info

Is that valid? I've never seen an ID and class declaration like that.

moltar

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3564817 posted 4:32 pm on Feb 3, 2008 (gmt 0)

I think it's valid. Firefox understands this.

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3564817 posted 5:49 pm on Feb 3, 2008 (gmt 0)

yea, it's valid, but I'll be blowed if I can remember what it's called, if indeed it has a name :o

It's a "simple" selector without a combinator

I've found a given example in conjuction with using multiple class selectors [w3.org]
p.marine.pastoral { color: green }

IMHO, it all hinges on the word combinators, with CSS there are various ways to combine selectors and these are described in the Selector Syntax [w3.org] part of the spec.. however as usual when forced to read and interpret a recommendation it's nae easy ;)

A selector is a chain of one or more simple selectors separated by combinators. Combinators are: whitespace, ">", and "+". Whitespace may appear between a combinator and the simple selectors around it.

The elements of the document tree that match a selector are called subjects of the selector. A selector consisting of a single simple selector matches any element satisfying its requirements. Prepending a simple selector and combinator to a chain imposes additional matching constraints, so the subjects of a selector are always a subset of the elements matching the last simple selector.

So my reading of that is that a selector can be a chain, separated by one of 3 different combinators; the example given by moltar and the CSS2.1 multiple class example does not need or use a combinator, there is no whitespace, or indeed anything else (in fact if there were whitespace between the simple selectors it would alter the target) - so to my interpretation this is a really really simple selector which simply says the selector has to match all.

I do have some vague recollection of reading something previously about IE and this type of selector, where it only matched the last selector in a chain, but I've ran some tests and all seems OK so perhaps (even if a problem did exist briefly) it was fixed between IE7beta and release, and back testing seems to back up moltars claim, in that it always was OK!

anyway no matter, moltar the code you gave is working fine for me, as in I am not seeing the default color and I am seeing the green or red border depending on which class I put in the HTML, what's the doctype and context and sorry for being cheeky but is the speeling and case correct?

[edited by: SuzyUK at 6:03 pm (utc) on Feb. 3, 2008]

Edouard_H

10+ Year Member



 
Msg#: 3564817 posted 6:05 pm on Feb 3, 2008 (gmt 0)

I think you're seeing a known bug in IE6: "The multiple #id.class bug", where it renders only the first CSS for the ID and skips the subsequent. Probably the only work-around is to drop the ID and use only the class selectors which may not be feasible if you're using them elsewhere.

moltar

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3564817 posted 6:13 pm on Feb 3, 2008 (gmt 0)

SuzyUK: i was talking about IE6.

Edouard_H: that's probably what it is and I already switched to using classes and it works fine.

Thank you everyone!

Xapti

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3564817 posted 3:48 am on Feb 4, 2008 (gmt 0)

Yeah you should just use two (or three) classes. The way you designed it as it is requires at least two elements with the same id, which is not good, even if they have different classes.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved