first-letter versus hover

[Alan J. Flavell]

OK, today's email brought a comment from a reader, pointing out
something that I'd long since noticed myself but hadn't done anything
about it.

On my pages, I've got a first-letter style on paragraphs.

So far, so good: some of the paragraphs begin with a link, and
there are styles in the stylesheet for link, hover etc. The first
letter is still displayed as styled for the paragraph's first-letter.

In Mozilla, if one hovers over one of these links, the first-letter
style evaporates (and the layout also shuffles itself around to fit).
I don't see this effect in WinIE, nor in Opera (I tried 6.04).

However, I have to admit it's been my experience that Mozilla
generally does what one specifies, whereas WinIE tends to do what one
might have intended instead :-}

To be honest, I only introduced the first-letter style for a bit of
fun, and if it gets to be a nuisance it would be one of the first
things I'd be happy to do without. But now that the topic has been
raised, does anyone care to comment (a) which behaviour is correct and
(b) what to do to fix the first-letter style against being "gazumped"
by the hover?

I've boiled the whole thing down to a simple test case with an
in-lined stylesheet to assist in overviewing what's involved.

Go to http://ppewww.ph.gla.ac.uk/~flavell/...st-letter.html and
you should see the first letter of the link is a red-ish colour and
larger than normal. (The rest of the link being the conventional
blue.)

But hover over the link, in Mozilla, and the first-letter style
evaporates.

Now look at the stylesheet. This effect is triggered by the mere
presence of:

a:link:hover { }

(I found that I could take away all of the properties from the
curly braces, but the effect persisted.)

N.B - if you take the link, then it counts as "visited", and you
won't be able to reproduce the effect again in this form. However,
if one then adds to the stylesheet:

a:visited:hover { }

then the effect re-appears for visited link(s) too.

[Peter Foti]

"Alan J. Flavell" <fl*****@ph.gla.ac.uk> wrote in message
news:Pi*******************************@ppepc56.ph. gla.ac.uk...

OK, today's email brought a comment from a reader, pointing out
something that I'd long since noticed myself but hadn't done anything
about it.

On my pages, I've got a first-letter style on paragraphs.

So far, so good: some of the paragraphs begin with a link, and
there are styles in the stylesheet for link, hover etc. The first
letter is still displayed as styled for the paragraph's first-letter.

In Mozilla, if one hovers over one of these links, the first-letter
style evaporates (and the layout also shuffles itself around to fit).
I don't see this effect in WinIE, nor in Opera (I tried 6.04).

However, I have to admit it's been my experience that Mozilla
generally does what one specifies, whereas WinIE tends to do what one
might have intended instead :-}

To be honest, I only introduced the first-letter style for a bit of
fun, and if it gets to be a nuisance it would be one of the first
things I'd be happy to do without. But now that the topic has been
raised, does anyone care to comment (a) which behaviour is correct and
(b) what to do to fix the first-letter style against being "gazumped"
by the hover?

I've boiled the whole thing down to a simple test case with an
in-lined stylesheet to assist in overviewing what's involved.

Go to http://ppewww.ph.gla.ac.uk/~flavell/...st-letter.html and
you should see the first letter of the link is a red-ish colour and
larger than normal. (The rest of the link being the conventional
blue.)

But hover over the link, in Mozilla, and the first-letter style
evaporates.

Now look at the stylesheet. This effect is triggered by the mere
presence of:

a:link:hover { }

(I found that I could take away all of the properties from the
curly braces, but the effect persisted.)

N.B - if you take the link, then it counts as "visited", and you
won't be able to reproduce the effect again in this form. However,
if one then adds to the stylesheet:

a:visited:hover { }

then the effect re-appears for visited link(s) too.

I would say this is a Mozilla bug.

Regards,
Peter Foti

[Brian]

Alan J. Flavell wrote:

On my pages, I've got a first-letter style on paragraphs.

So far, so good: some of the paragraphs begin with a link, and
there are styles in the stylesheet for link, hover etc. The first
letter is still displayed as styled for the paragraph's first-letter.

In Mozilla, if one hovers over one of these links, the first-letter
style evaporates (and the layout also shuffles itself around to fit).

This effect is triggered by the mere presence of:

a:link:hover { }

Would multiple pseudo classes work?

p:first-letter, p>a:hover:first-letter { }
--
Brian
follow the directions in my address to email me

[Peter Foti]

"Brian" <us*****@julietremblay.com.invalid-remove-this-part> wrote in
message news:YK********************@rwcrnsc52.ops.asp.att. net...

Alan J. Flavell wrote:

On my pages, I've got a first-letter style on paragraphs.

So far, so good: some of the paragraphs begin with a link, and
there are styles in the stylesheet for link, hover etc. The first
letter is still displayed as styled for the paragraph's first-letter.

In Mozilla, if one hovers over one of these links, the first-letter
style evaporates (and the layout also shuffles itself around to fit).

This effect is triggered by the mere presence of:

a:link:hover { }

Would multiple pseudo classes work?

p:first-letter, p>a:hover:first-letter { }

Maybe... but Mozilla would still be broken. :)

Oddly enough, this works for Mozilla:

p:first-letter, p>a:first-letter
{ font-size: 125%; color: #933; background-color: #fff6eb; }

However, that causes IE to no longer work. In fact, if you put any other
identifiers in addition to p:first-letter, IE stops working.

Both of these browsers are broken. :)

Regards,
Peter Foti

[Alan J. Flavell]

On Fri, 17 Oct 2003, Peter Foti wrote:

Oddly enough, this works for Mozilla:

p:first-letter, p>a:first-letter
{ font-size: 125%; color: #933; background-color: #fff6eb; }
So it does - thanks for the clue!
However, that causes IE to no longer work. In fact, if you put any other
identifiers in addition to p:first-letter, IE stops working.

That's OK. With the help of your suggestion, I found that if I simply
duplicate the properties separately:

p:first-letter
{ font-size: 125%; color: #933; background-color: #fff6eb; }

p>a:first-letter
{ font-size: 125%; color: #933; background-color: #fff6eb; }

then everybody seems to be happy.

(modulo some minor repositioning in IE on hover - but that's a
separate issue which should have a straightforward solution).

Thanks again for the clue which led to the workaround. (If there's a
Mozilla developer in the house, they might like to look into this...?)

cheers

[Henri Sivonen]

In article <vp************@corp.supernews.com>,
"Peter Foti" <pe****@systolicnetworks.com> wrote:

I would say this is a Mozilla bug.

Bug 23604 to be precise.

--
Henri Sivonen
hs******@iki.fi
http://i.fi/hsivonen/
Mozilla Web Author FAQ: http://mozilla.org/docs/web-developer/faq.html

[Mikko Rantalainen]

Alan J. Flavell wrote:

On Fri, 17 Oct 2003, Peter Foti wrote:

Oddly enough, this works for Mozilla:

p:first-letter, p>a:first-letter
{ font-size: 125%; color: #933; background-color: #fff6eb; }

So it does - thanks for the clue!

However, that causes IE to no longer work. In fact, if you put any other
identifiers in addition to p:first-letter, IE stops working.

That's OK. With the help of your suggestion, I found that if I simply
duplicate the properties separately:

p:first-letter
{ font-size: 125%; color: #933; background-color: #fff6eb; }

p>a:first-letter
{ font-size: 125%; color: #933; background-color: #fff6eb; }

then everybody seems to be happy.

Except that the latter selector does totally different thing than the
first selector.

"p:first-letter" should select the first letter of the paragraph no
matter what nested element contains it. Mozilla has bug that causes this
style to loose if the nested inline element (for example: <a>) needs to
be redrawn because Mozilla incorrectly assumes that it only needs to
match styles that apply to that <a> element. As the selector
"p:first-letter" can never match an <a> element the code then proceeds
without applying that selector.
"p>a:first-letter", on the other hand, does a different thing. It
matches *any* link that's immediate child of the <p> element. So, if you
have markup like:
<p>Some <a>sample</a> text <a>here</a>.</p>
and you hover the mouse above words "sample" and "here", the
first-letter gets applied to those words. This is not what you want.
[Note: Mozilla doesn't apply first-letter selector to inline elements.]

Arguably, the :first-letter selector should apply to block level
elements only (just like Mozilla applies it and this workaround is based
on this behavior) but I see nothing in the spec suggesting such behavior
<URL:http://www.w3.org/TR/CSS21/selector.html#first-letter>.

The CSS3 selector spec
<URL:http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#first-letter>
even uses following wording:
"The ::first-letter pseudo-element describes the first formatted letter
of an element. The ::first-letter pseudo-element can be attached to all
elements." I read that as the ::first-letter selector can match any
element (inline or not) and that the selector describes the first letter
inside *that* element. This is not what Mozilla does.

Any guesses about the correct behavior?
Thanks again for the clue which led to the workaround. (If there's a
Mozilla developer in the house, they might like to look into this...?)

No need to be Mozilla developer. Anybody can report Mozilla bugs at
http://bugzilla.mozilla.org/ -- and as Henri already mentioned, this
issue is already reported as bug 23604.

--
Mikko

[Alan J. Flavell]

On Mon, 20 Oct 2003, Mikko Rantalainen wrote:

p>a:first-letter
{ font-size: 125%; color: #933; background-color: #fff6eb; }

then everybody seems to be happy.
Except that the latter selector does totally different thing than the
first selector.

OK, but it comes out well enough in practice...
Arguably, the :first-letter selector should apply to block level
elements only (just like Mozilla applies it and this workaround is based
on this behavior) but I see nothing in the spec suggesting such behavior
<URL:http://www.w3.org/TR/CSS21/selector.html#first-letter>.

Fair comment.

Thanks again for the clue which led to the workaround. (If there's a
Mozilla developer in the house, they might like to look into this...?)

No need to be Mozilla developer. Anybody can report Mozilla bugs at
http://bugzilla.mozilla.org/ -- and as Henri already mentioned, this
issue is already reported as bug 23604.

Sorry, I had missed that. If I had ever realised that David Baron
posted this as a bug after I'd mentioned it to him (apparently it was
in Jan 2000 - how time flies...), I must have forgotten it in the
meantime.

cheers

[Brian]

Mikko Rantalainen wrote:

[Note: Mozilla doesn't apply first-letter selector to inline elements.]
It follows the spec.
Arguably, the :first-letter selector should apply to block level
elements only

It applies as you think it should.

http://www.w3.org/TR/REC-CSS2/select...l#first-letter

"The :first-letter pseudo-element matches parts of block-level
elements only."

--
Brian
follow the directions in my address to email me

[Vincent]

Brian wrote:

http://www.w3.org/TR/REC-CSS2/select...l#first-letter

"The :first-letter pseudo-element matches parts of block-level elements
only."

Yes, but:
http://www.w3.org/TR/CSS21/selector.html#first-letter

"The :first-letter pseudo-element can be used with all elements that
contain text, or that have a descendant in the same flow that contains
text. A UA should act as if the fictional start tag of the first-letter
pseudo-element is just before the first text of the element, even if
that first text is in a descendant."
--
to email me, add "poinot" before the at-sign in my
address and wanadoo after it...

[Brian]

Vincent wrote:

Brian wrote:

http://www.w3.org/TR/REC-CSS2/select...l#first-letter

"The :first-letter pseudo-element matches parts of block-level elements
only."

Yes, but:
http://www.w3.org/TR/CSS21/selector.html#first-letter

"The :first-letter pseudo-element can be used with all elements that
contain text, or that have a descendant in the same flow that contains
text. A UA should act as if the fictional start tag of the first-letter
pseudo-element is just before the first text of the element, even if
that first text is in a descendant."

If I understand correctly, those 2 statements to not contradict each
other.

P:First-letter {color: green; background: black}

<P><SPAN>Today</SPAN>, the prime minister resigned.</P>

The part that you quoted means that the "T" in "Today" would be
treated as :first-letter of <P> even though it is inside <SPAN>. But
:first-letter matches the first letter only of block level elements.
SPAN:First-letter {color: green; background: black}

<P><SPAN>Today</SPAN>, the prime minister <SPAN>resigned</SPAN>.</P>

"T" is green, "r" is not, because it does not match the first letter
of the block level element.

All this assumes that I understand the spec correctly.

--
Brian
follow the directions in my address to email me

[Vincent]

Brian wrote:

SPAN:First-letter {color: green; background: black}

<P><SPAN>Today</SPAN>, the prime minister <SPAN>resigned</SPAN>.</P>

"T" is green, "r" is not, because it does not match the first letter of
the block level element.

You may be right, but this subtlety doesn't clearly springs out of the
specification. According to this:

"The :first-letter pseudo-element can be used with all elements that
contain text, or that have a descendant in the same flow that contains
text.

I would say that <span> is an "element that contains text", and as such,
should be modified by :first-letter wherever it is...

What's more, the difference between CSS2 and CSS2.1 about :first-letter
is not clearly stated in the appendix C (changes) which only makes
things a little bit more confusing. I would nonetheless consider the 2.1
version will supersede CSS 2 when it comes to a recommendation status
(it's still a working draft), hence the sentence:

"The :first-letter pseudo-element matches parts of block-level elements
only."

from CSS 2 should no longer apply.
--
to email me, add "poinot" before the at-sign in my
address and wanadoo after it...

[Mikko Rantalainen]

Brian wrote:

Mikko Rantalainen wrote:

[Note: Mozilla doesn't apply first-letter selector to inline elements.]

It follows the spec.

Arguably, the :first-letter selector should apply to block level
elements only

It applies as you think it should.

http://www.w3.org/TR/REC-CSS2/select...l#first-letter

"The :first-letter pseudo-element matches parts of block-level
elements only."

Doh! I didn't search for string "block" in CSS 2.1 spec earlier but I
did it with CSS 3 spec - and there's no string "block" in the
::first-letter specification. Especially, the sentence you quoted above
has been replaced with "The ::first-letter pseudo-element matches parts
of elements only." I take this as a clear message that this property now
applies to all elements.

http://www.w3.org/TR/2001/CR-css3-se.../#first-letter
I still think that spec should clearly define how following should be
rendered:

<p>Some <span>text</span> here</p>

combined with style

p span::first-letter { color: red; }

Should the "S" or "t" be red or neither? If "S" or neither, why so?
I think that the "fictional tag sequence" should be

<p>Some <span><span::first-letter>t</span::first-letter>ext</span> here</p>

--
Mikko