Previous Message
Next Message

An odd IE 7 bug with :first-letter, link, and border

Sent by Jukka K. Korpela on 17 March 2007 20:08

I noticed that on IE 7 (both in standards mode and in quirks mode),
a border set for a paragraph affects its first child also, when the child 
appears at the very start of the paragraph content and when there is a 
setting for p:first-letter (any setting). This sounds absurd, but if you 
don't believe me, please look at the following page on IE 7:

Well, the style sheet is simple so I quote it:

p:first-letter { font-size: 100% }

..korostus { margin: 0.3em 0;
             background: #fffff0;
             color: #000;
             padding: 0.05em 0.1em 0.05em 0.25em;
             border: solid thin #141; }

and the bug seems be triggered whenever I use
<p class="korostus"><span>...</span>...</p>
or some other text-level element instead of <span>: a separate border will 
be drawn around it, as if the border property were inherited! (The obvious 
fix of explicitly setting border: none for that element does not help.)

After noticing this bug on some pages of mine, I was able to circumvent it 
by rewording the paragraphs so that they begin with text and not an 
element. But the general puzzle remains and might cause rather unexpected 

The reason I'm using :first-letter on my real pages is that I use it to 
set left padding for the first line of a paragraph, instead of 
text-indent, to overcome bugs in IE that cause indentation at the start of 
a new page in printing, as discussed previously on this list. It seems 
that the nice solution that was offered may get attacked by a different IE 
bug. :-(

Jukka "Yucca" Korpela,

css-discuss [EMAIL-REMOVED]]
IE7 information --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread: