Jukka K. Korpela wrote:
> 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:
>
> http://www.cs.tut.fi/~jkorpela/test/border.html
>
> 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
> problems.
>
> 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. :-(
Any workaround using the pseudo-class/element implementation in IE might
face more problems than solved; "no good idea." Francky already showed
that the situation in IE6 is worse.
Your code was
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;
}
...
<p class="korostus"><a href="foo">A link</a> begins a paragraph here.</p>
<p class="korostus"><span>A span</span> begins a paragraph here.</p>
In IE7, the pseudo-element that is part of or immediately followed by
the span or link will inherit the properties, not only the border.
For example:
p:first-letter { font-size: 100%; }
.korostus {
margin: 0.3em 1em; /**/
background: #fffff0;
color: pink; /**/
padding: 0.05em 0.1em 0.05em 0.25em;
border: solid thin #141;
}
I changed the margin and the color. In IE7, the first-letter inherits
the pink color and the horizontal margin. And the inherited border has a
position not easy to predict.
Even if you would set margin:0 on p:first-letter: no avail.
However, a simple fix in IE6 and IE7 is to alter the specificity of the
selector
p:first-letter { font-size: 100% }
p.korostus {
margin: 0.3em 0;
background: #fffff0;
color: #000;
padding: 0.05em 0.1em 0.05em 0.25em;border: solid thin #141;
}
There is no explanation within CSS for that bug. Raise the specificity
for the selector, and the first-letter pseudo element will not inherit
the property anymore.
Be careful with that first-letter +span/+link construction, it may crash
IE6+7.
http://www.satzansatz.de/cssd/pseudocss.html#fltadjacent
regards,
Ingo
--
http://www.satzansatz.de/css.html
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
