Previous Message
Next Message

Re: [css-d] Psuedo class inheritance/IE6 bug(?)

Sent by Porter Glendinning on 24 January 2002 20:08


At 07:26 PM 1/24/02, Chris Casciano digitized these thoughts:
>* { font-family: Arial, sans-serif; font-size:14px; color:#000000;
>background-color:#FFFFFF;}
>p { font-family: Georgia, serif; color:#0000FF; }
>p:first-letter { font-size: 30px; }
>
>Instead of the expected result ‹ the first letter of the paragraph 
>being blue, 40px & Georgia ‹ I ended up with a 40px black Arial first 
>letter. A built example can be found here:
>
>http://placenamehere.com/css-discuss/psuedo_test.html

Actually, this is the correct interpretation of your rule sets 
(surprisingly). If you read the section of the CSS2 Recommendation on 
pseudo-elements [1] you'll see that the recommended handling of the 
:first-line and :first-letter pseudo-elements is for the browser to 
create a fictitious element within the real element.

What this means is that, when parsed by the browser, the code for your 
paragraph would likely be turned into something like this:

     <p><p:first-line><p:first-letter>T</p:first-letter>his is a
     test paragraph whose characters are expected to be all
     blue.</p:first-line></p>

Because of this, the properties you set in the * rule set (which 
matches any element) end up overriding  the ones you've set for the p 
element the same way as if you had any other elements embedded within 
that paragraph.

Interestingly, Mozilla 0.9.7 doesn't behave this way; it shows the 
initial cap in blue Georgia. I haven't been able to find anything that 
says whether the fictitious element implementation above is required 
for CSS2 conformance, though. If it is, this should probably be 
submitted to Bugzilla for fixing, if it hasn't already.

Anyone else have any idea?

- Porter

[1] http://www.w3.org/TR/REC-CSS2/selector.html#q20


+--------------------------------------------------------+
| Porter Glendinning      [EMAIL-REMOVED]  |
| Web/UI Commando              http://www.serve.com/apg/ |
+--------------------------------------------------------+
| Porter's Workshop - http://www.serve.com/apg/workshop/ |
+--------------------------------------------------------+
Previous Message
Next Message

Message thread: