Sent by Sam Carter on 31 January 2003 13:01
This problem is similar to one I have struggled with which uses a 30px
high "icon" in the first character position. I hope someone resolves
this thread in a solid cross-browser way.
In Eric's "Cascading Style Sheets", page 98 and 99, there is an example
of how line-height changes (or not) when a <big> inline element is added
in a paragraph. In the stairway case, you don't want the line-height to
change. (It is considered a good effect if two or more lines of text
appear in the vertical space of the first character) This behavior is
good to know but it isn't any help for this problem. You have omitted
line-height correctly from the first-letter declaration.
Would removing the float cause a problem elsewhere? (Float is
contributing to the stair effect) I removed it in Topstyle and using
IE6, the stairway is gone but the first letter becomes text-align
bottom. To get the same look, I replaced the float statement with
vertical-align: text-top;
The stairway is gone and it looks correct in IE6. I don't know about
other browsers without posting. I'll watch for other feedback.
Sam
-----Original Message-----
From: [EMAIL-REMOVED]
[EMAIL-REMOVED]] On Behalf Of The Moose
Sent: Friday, January 31, 2003 2:33 AM
To: [EMAIL-REMOVED]
Subject: [css-d] Stairway to Heaven: Opera Libretto for First-Letters
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
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/