On 7/5/06, Simon Kittle <[EMAIL PROTECTED]> wrote:
> hey,
>
> i have a question regarding the cascading of styles. I'd like to set a
> default color on all DIV elements so I have the following:
>
> div
> {
> color: blue;
> }
>
> in the <HEAD> of my document (in a <style> tag).
>
> And I the have HTML similar to the following:
>
> <div>
> should be blue
> <div style="color: red">
> should be red
> <div>
> div inside red div, but is it red? no
> </div>
> </div>
> </div>
>
> What I find is that because of the default color on DIV, the style="color:
> red" doesn't cascade down to the third level DIV. How do I get this
> behaviour?
According to the specs, you should be able to do this by explicitly
stating that any div inside another div should inherit its color from
its parent, like so:
div div {
color: inherit;
}
Unfortunately, "inherit" is not well-supported across browsers.
Firefox properly interprets the above rule, but IE ignores it.
To get around this, you will need to define your alternate styling as
a class instead of directly in the HTML. You could then, for example,
say
div {
color: blue;
}
div.red, div.red div {
color: red
}
<div>blue
<div class="red">red
<div>still red</div>
</div>
</div>
However if you have quite a number of these exceptions that require
this type of "inheritance" on general HTML tags, you may want to
reconsider the concept of defaulting this, and instead defining the
exact circumstances under which colors should be defined. If blue is
appropriate for the content area, it might be better to simply define
that area's container with an id of "content", with a style like
#content {
color: blue;
}
Since color inherits naturally, this should cover all divs within
#content, except the ones that you've colored differently.
> I can kinda get around this for my DIV elemnets by just setting a default
> color attached to the BODY element. But the trouble is this doesn't work
> for my TABLES, because TD elements don't seem to take on the style from a
> BODY.
In my own tests I'm not seeing this -- it is inheriting correctly. Can
you provide a testcase?
Thanks,
Michael
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
