underline of anchor link goes beyond text and across img

RESOLVED INVALID

Status

()

Core
Layout: Block and Inline
RESOLVED INVALID
12 years ago
12 years ago

People

(Reporter: jonathan chetwynd, Unassigned)

Tracking

({qawanted, testcase})

Trunk
qawanted, testcase
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

12 years ago
User-Agent:       Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8b3) Gecko/20050712 Firefox/1.0+
Build Identifier: Mozilla/5.0 (Macintosh; U; PPC Mac OS X Mach-O; en-US; rv:1.8b3) Gecko/20050712 Firefox/1.0+

When displaying a link which covers a graphic and text, the text-decoration:
underline property should not stretch beyond the text and across the graphic.

<span></a><h2><a href="where.html"><img src="clara.gif" alt="Clara" /> Where
</a> can I get help?</h2></span>

tested also on linux/suse9.2/firefox1.0.6

Reproducible: Always

Actual Results:  
the underline strikes through the graphic

Expected Results:  
the underline should be limited to the length of the text only.
(Reporter)

Comment 1

12 years ago
oops! apologies typo led me to include erroneous </a><h2></h2> snippet should read:

<span><a href="where.html"><img src="clara.gif" alt="Clara" /> Where </a> can I
get help?</span>
(Reporter)

Comment 2

12 years ago
it might also help to include:

<style>
img {vertical-align: middle; }
</style>

Comment 3

12 years ago
Created attachment 194895 [details]
Testcase from description

Reporter, does this describe your problem?
(Reporter)

Comment 4

12 years ago
yup!

thanks for adding test case 

x:"

Comment 5

12 years ago
http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration

"Text decorations on inline boxes are drawn across the entire element, going
across any descendant elements without paying any attention to their presence."

There is one exception mentioned in the paragraph before that but it does not
apply here since the <a> has text.

-> INVALID
Status: UNCONFIRMED → RESOLVED
Last Resolved: 12 years ago
Keywords: testcase
Resolution: --- → INVALID
(Reporter)

Comment 6

12 years ago
it also states:

"underline
    Each line of text is underlined."

Opera and IE interpret as per this bug report and only underline text.
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---
(Reporter)

Comment 7

12 years ago
Mats,

did you test this bug on other user agents?

I don't think you've interpreted this right, but if you close again I will check
with CSS group and Bert.

What would be the rationale for your interpretation?

Comment 8

12 years ago
I think the quote from CSS 2.1 in comment 5 is reasonably clear.
Component: General → Layout: Block and Inline
Keywords: qawanted
Product: Firefox → Core
QA Contact: general → layout.block-and-inline
Version: unspecified → Trunk
I don't think it is a matter of interpretaion.  notwithstanding the fact that IE
and Opera behave differently, there is realy no other way to interpret what the
specification says other than to do what Firefox is doing.
 
If it were not supposed to be drawing the line through the image, then it would
be pointless to include an exception saying you don't draw the line through the
image if there is no text in the element.

That said I do agree that what the specification says to do does not make a
great deal of logical sense.  

I suspect it was a hack added to the specification to satisfy people who wanted
to be able to include text height images in with the text and have it all
underlined with a continuous underline.

It is also possible that the wording of the specifiation is bad and what it says
is not what it was intended to say, but then I would have no explanation for
what that exception is there for.
Component: Layout: Block and Inline → Build Config
Product: Core → Firefox
Version: Trunk → 1.0 Branch

Updated

12 years ago
Component: Build Config → Build Config
Product: Firefox → Core
QA Contact: layout.block-and-inline → build-config

Updated

12 years ago
Component: Build Config → Layout: Block and Inline
Version: 1.0 Branch → Trunk

Comment 10

12 years ago
I'm not really sure if it's the same problem as discussed in here..
If you two or more images inside <a> after each others like this:
<a href="http://www.a-page.something"><img src="image.gif"></a><a href="http://www.a-page.something"><img src="image2.gif"></a>

There is no problem, but if you have any newline inside the <a>, either on the left of img or right, firefox will draw a single underline character after the image. I'm using Firefox RC3, and found it in both RC2 and RC3...

//Johan
This is invalid, for the reason Mats said.  Please do not reopen this bug again.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 12 years ago12 years ago
Resolution: --- → INVALID
(Reporter)

Comment 12

12 years ago
I have asked Bert Bos and the WG to respond:
http://lists.w3.org/Archives/Public/www-style/2005Dec/0029.html

It might be helpful to have an attachment demonstrating the benefits of the current interpretation.

regarding Bill's suggestion #9 that inline images be underlined, this has never been a standard way of indicating that images are links. A highlight border is the more usual method.
You need to log in before you can comment on or make changes to this bug.