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/
