Sent by The Moose on 31 January 2003 07:07
Hello All Good People,
I have discovered some peculiarity regarding the :first-letter pseudo-element, and Big John advised
me wisely to post this to the list, which I hereby do.
Before I say anything, let me post the link for the test page:
http://www.literarymoose.info/=/test.html . It will look mighty different depending on what you
browse with. My description is very long, but if it shall prove to you as fascinating as it has
proven to me, I'll be happy to have shared it with you. Please bear with me...
Observant observations of an amateur observer who is sure to have made a conceptual mistake
although
both markup and css validate:
1. In some browsers, first-lettered <p> outside the <div> look like a stairway (Mozilla 1.3, IE6 -
on WinXP).
2. Opera 7 Final does not seem to support the property "float: left" for the first-lettered
element.
Yours Truly followed the W3C example that uses float for :first-letter
3. Yours Sincerely attempted to generate some breathing space between the first-lettered element
and
the rest of the paragraph by using margin-right. Removal of this element or its addition did not
generate any observable result to your observer.
4. Mozilla 1.3 Build 2003/01/24 does respect the float; inside the DIV it looks as Sincerely Yours
had planned, although outside of the DIV, it is squashed somewhat way below the decency line, where
the latter is a bit undefined. To my eye, it looks miserably, as if... hung on a paragraph-ive
hook.
5. The very same Mozilla, in a good company of IE6, displays the outside-DIV paragraphs in a
stairway-like fashion. Jokes are over. Stairway has begun.
6. There is no sign of any stairway in Opera7.
7. IE6 respects the float property for the :first-letter element, but only outside of DIV. Inside,
it looks just like it does in Opera. Non-floated.
8. Opera does not respect the font-family property for the :first-letter pseudo-element. I used
Palatino Linotype for the first-letter, but any font I attampted to use generated the same result
in
Opera. That is, no result - none whatsoever.
9. IE6 and Mozilla seem to understand Your Truly, and respect the margin-right property for
first-letter element. Opera does not.
10. IE6 does not generate a stairway inside the DIV if there is less text than one full line.
Mozilla, however, propagates the stairway anywhere where the paragraph does not fill the entire
line. Opera is blissfully unaffacted stairway-wise.
11. I know that this is getting long, but I am quite fascinated. I added emphasis and strong
emphasis to some, but not all, paragraphs, exactly to their first words, to test for the reaction
of
the browsers. In the test page, there is no effect whatsoever. An identical CSS is used on one of
my
regular pages, where 2 additional effects are in display:
11. CONTINUED For <strong>'ed and <em>'ed first words, IE6, and only that browser, suddenly begins
to behave strangely. Either the paragraph is displayed with a text-indent which was nonexistent in
CSS, or it is... blockquoted, with some left paddingo-margin added for no CSS-ive reason. This is
impossible to replicate in the test file, and IE does not always behave this way. A proof for IE6
users can be seen on a half-complete page: http://www.literarymoose.info/literature/maupassant.html
. There is one book review, and it has 3 paragraphs. The first one is indented for no reason, the
third one is blockquoted. Both effects are triggered by strong emphasis. It can also be triggered
by
regular emphasis. Both are ghost CSS that I haven't coded. I swear.
11. CONTINUED LONGER. I won't bother you with another example, but I was just as perplexed when the
behavior described in part 11 happened in the test pages when the styles were LINK'ed, and not
<style>-hardcoded into the page... I also swear by this.
----------------------------------------
I know IE6 is buggy. Mozilla behaves in a way that is incomprehensible to me. I did check the Opera
7 final documentation, and nowhere it is said that it has problems with styling first-letters. All
of them do.
I apologize for the length of this message. If you have gotten to this point, I would like very
much
to thank you for your time...
signed,
Wojtek