Re: [css-d] Overriding Inline Styles w Attribute Selectors !important
Hi Bill,
Yup targeting a class or ID in the element w !important works great to override
inline elements. And thanks for helping clarify specificity a bit more than I
already understood it.
Elli
--- On Sat, 8/23/08, Bill Brown [EMAIL PROTECTED] wrote:
From: Bill Brown [EMAIL PROTECTED]
Subject: Re: [css-d] Overriding Inline Styles w Attribute Selectors
!important
To: [EMAIL PROTECTED]
Cc: CSS Discuss css-d@lists.css-discuss.org
Date: Saturday, August 23, 2008, 8:07 PM
Elli Vizcaino wrote:
I was experimenting with attribute selectors to
override inline
styles and it worked in FF but of course not in IE so
I was
wondering, if there was anyway to take control of
inline styles and
have it work across browserland.
CSS in stylesheet - p[style] {color: #000 !important;
float: left
!important;}
HTML - p style=color: green; float:
right;I like to write
CSS./p
Hi Elli--
You actually have two separate issues going on here. The
first is
IE-lte-6's lack of support for the attribute selector
in CSS. Your
second issue is one of specificity.
The values for specificity are calculated like this:
a,b,c,d,e
...where...
a = author !important styles (+2 for user !important
styles)
b = inline styles
c = id styles
d = class and attribute styles
e = tag styles
(* is 0, it has no value)
So, for example, the specificity in your examples:
Your CSS:
p[style] {
color: #000 !important;
float: left !important;
}
...has a specificity of 1,0,0,1,1 in normal browsers,
1,0,0,0,1 for IE6.
Your HTML:
p style=color: green; float: right;
...has a specificity of 0,1,0,0,0 in all browsers.
To make this work cross-browser (ahem IE6), you have to
class or ID the
element which will allow IE6 to pick up the style sheet
styles and not
the inline styles. Interestingly enough, I noticed in
testing this for
you that IE6 will acknowledge the use of !important, but
only if the
rule is not re-declared within the same style block.
For example:
p.special {
color: #000 !important;
float: left !important;
}
p.special {
color: #00f;
}
...works just fine in IE6, while:
p.special {
color: #000 !important;
color: #00f;
float: left !important;
}
...does NOT. IE6 seems to over-write the !important rule,
rather than
applying both rules and using specificity. When the styles
are broken
out into two blocks, IE6 seems to pick it up just fine and
apply
specificity correctly.
I believe IE7 and all the modern browsers support attribute
selectors,
so you should be fine cross-browser land, except for
IE-lte-6.
I hope that helps.
--Bill
--
~~~
TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com |
Anytowne.com
Bill Brown, Web Developer - From dot concept to dot
com since 1999
The intuitive mind is a sacred gift and the rational
mind is a
faithful servant. We have created a society that honors the
servant and
has forgotten the gift. -- Albert Einstein
~~~
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org --
http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Overriding Inline Styles w Attribute Selectors !important
Hello,
I was experimenting with attribute selectors to override inline styles and it
worked in FF but of course not in IE so I was wondering, if there was anyway to
take control of inline styles and have it work across browserland.
CSS in stylesheet - p[style] {color: #000 !important; float: left !important;}
HTML - p style=color: green; float: right;I like to write CSS./p
TIA,
Elli
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Overriding Inline Styles w Attribute Selectors !important
Elli Vizcaino wrote:
I was experimenting with attribute selectors to override inline
styles and it worked in FF but of course not in IE so I was
wondering, if there was anyway to take control of inline styles and
have it work across browserland.
CSS in stylesheet - p[style] {color: #000 !important; float: left
!important;}
HTML - p style=color: green; float: right;I like to write
CSS./p
Hi Elli--
You actually have two separate issues going on here. The first is
IE-lte-6's lack of support for the attribute selector in CSS. Your
second issue is one of specificity.
The values for specificity are calculated like this:
a,b,c,d,e
...where...
a = author !important styles (+2 for user !important styles)
b = inline styles
c = id styles
d = class and attribute styles
e = tag styles
(* is 0, it has no value)
So, for example, the specificity in your examples:
Your CSS:
p[style] {
color: #000 !important;
float: left !important;
}
...has a specificity of 1,0,0,1,1 in normal browsers, 1,0,0,0,1 for IE6.
Your HTML:
p style=color: green; float: right;
...has a specificity of 0,1,0,0,0 in all browsers.
To make this work cross-browser (ahem IE6), you have to class or ID the
element which will allow IE6 to pick up the style sheet styles and not
the inline styles. Interestingly enough, I noticed in testing this for
you that IE6 will acknowledge the use of !important, but only if the
rule is not re-declared within the same style block.
For example:
p.special {
color: #000 !important;
float: left !important;
}
p.special {
color: #00f;
}
...works just fine in IE6, while:
p.special {
color: #000 !important;
color: #00f;
float: left !important;
}
...does NOT. IE6 seems to over-write the !important rule, rather than
applying both rules and using specificity. When the styles are broken
out into two blocks, IE6 seems to pick it up just fine and apply
specificity correctly.
I believe IE7 and all the modern browsers support attribute selectors,
so you should be fine cross-browser land, except for IE-lte-6.
I hope that helps.
--Bill
--
~~~
TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com
Bill Brown, Web Developer - From dot concept to dot com since 1999
The intuitive mind is a sacred gift and the rational mind is a
faithful servant. We have created a society that honors the servant and
has forgotten the gift. -- Albert Einstein
~~~
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
