On 7/27/05, Rebecca Cox <[EMAIL PROTECTED]> wrote:
>
> Grr IE, you know how you can use an ID & class selector together on same
> element?
>
> Eg
>
> .resources .stories#banner {
> background: #666;
> }
>
> .resources .know#banner {
> background: #ccc;
> }
>
> All fine & valid etc but IE6 Win will only apply the first such style in the
> CSS file - so in this example .stories is all good but .know is ignored.
>
> Anyone know why this is?
>
> So perhaps not the best to use if you have a set of classes to list.
IE seems to have a problem where, in a simple selector, it can
identify a combination of an element and a class, or an element and an
ID, but not a class and ID or multiple classes.
The simplest workaround is to rethink your tag structure. Typically,
IDs are used to define either unique elements or containers for types
of content, while classes are used to identify exception cases for how
elements should be styled in a container. For example, in a div with
the ID "navigation", the main list might be styled to look like tabs.
The current section might be highlighted by adding a class to its tab,
like so:
#navigation li.current a {
display: block;
background-color: red;
}
But you can also get the same effect by wrapping the link in a strong
tag, which can also have some semantic purpose to identify that this
section, being the current one, is more important than the others:
#navigation li strong a {
display: block;
background-color: red;
}
You might also find ways to remove the class entirely, or move it to
another element. If, for example, you had the navigation HTML/CSS set
up like
<ul>
<li class="tab" id="section1">...</li>
<li class="tab" id="section2">...</li>
<li class="tab" id="section3">...</li>
</ul>
.tab#section1 {...}
.tab#section2 {...}
.tab#section3 {...}
you could rearrange it like
<ul class="tabs">
<li id="section1">...</li>
<li id="section2">...</li>
<li id="section3">...</li>
</ul>
.tabs #section1 {...}
.tabs #section2 {...}
.tabs #section3 {...}
If, however, there is no way around it and you need to define both a
class and an ID or another class for the rule, you can get sneaky and
create an IE-specific rule that targets one of the items (the ID or
class) and use an expression to determine the other:
/* hide from IE Mac \*/
* html .resources #banner {
background-color: expression(this.className == "know" ? "#CCC" :
this.className == "stories" ? "#666" : "transparent");
}
/* undo hiding */
IE PC interprets the JavaScript inside the "expression()" clause to
create a value for this property. "this" refers to the element in the
HTML identified by the CSS selector -- the element with id="banner" --
and "className" refers to the "class" attribute on that element. This
is entirely invalid according to W3C, so it must not be accessed by
anyone other than IE PC (hence the "* html" hack at the beginning, to
only let IE see it, and the backslashed comment hack to keep Mac IE
from seeing it). It also only works if the user has JavaScript turned
on, so you should make sure you are comfortable with the results if
it's turned off.
Use this technique very cautiously, as IE reinterprets this expression
every time the window resizes or a mouse event occurs (hovering over
drop-down navigation, for example). Here we are applying the
expression to only one element -- the item with the ID -- and
hopefully that element doesn't contain many other elements, so it
shouldn't impact it much. Applying it to a class that is used
frequently will slow down the computer considerably. Applying an
expresssion to a tag such as <div> or <p> could bring your computer to
a halt. But if there's no other way to do what you want, this might
help.
HTH,
Michael
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
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/
