Sent by Ingo Chao on 15 May 2005 15:03
Alys Morgan schrieb:
> Or if neither of the sets of styles are unique, you can have:
> <div class="explorer mini">Mini</div>
> <div class="explorer full">Full</div>
>
> .. I know this works but I'm not sure what the general opinion is. Are
> there any problems with it? I have used it when I have several floats
> with most of the same styling, but some floated left and some floated
> right .
Perfectly valid. I'd like to add a word of caution, though.
--------------
css-d WIKI http://css-discuss.incutio.com/?page=MultipleClasses
The problem with multiple classes in IE is that you have to avoid CSS
multiple selectors with "common final matches" like
..explorer {background: gray; }
..mini { font-weight: normal;}
..full { font-weight: bold; }
..full.explorer {text-decoration:none; background: red;}
..mini.explorer {text-decoration:underline}
<!-- modified -->
<div class="mini explorer">Mini</div>
<div class="full explorer">Full</div>
Valid, and sometimes useful with more alternatives than shown here, but
breaks IE: Now both the divs get underlining /and/ red.
--------------
Another IE6 bug can be seen when multiple css/html files are combined.
#sidebar {background: maroon; }
#sidebar.head1 { color: white;} /* A */
#sidebar.head2 { color: blue;} /* B */
#sidebar.head1 {text-decoration: underline; } /* C */
I think of two pages: both load the CSS file/files above. Both show this
sidebar:
<div id="sidebar" class="head1">Lorem</div>
<!-- <div id="sidebar" class="head2">ipsum</div> -->
(The html comment is here to show that the bug is /not/ related to using
the same unique id for two divs at one page. Alternate the comments to
see for testing, or just remove the comment.)
Did I really expect to get "Lorem" white + underlined and "ipsum" blue?
--------------
I copy the rule A into C:
#sidebar {background: maroon; }
#sidebar.head2 { color: blue;} /* B */
#sidebar.head1 {text-decoration: underline; color: white;} /* C + A */
The second page, "ipsum" text is blue ... finally, he, he.
But the first page, "Lorem" has ... no color, no underline? This is one
of these frustrating moments.
I think, for matching id="sidebar" class="head1", IE searches at
#sidebar.head2 at first and fails. Now it blocks: #sidebar.<anymatch>
and will not be able to look further at #sidebar.head1
______________________
The bottom line for me is: I can use multiple classes/id+classes as I
like it, and I like it, but I don't use multiple selector rules in IE.
It just looks like as if they'd work in IE6, but they do not, imho.
Ingo
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/