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/

Reply via email to