text-decoration should not underline images (imgs)

RESOLVED FIXED in mozilla8

Status

()

Core
Layout: Block and Inline
RESOLVED FIXED
7 years ago
6 years ago

People

(Reporter: kwutzke, Unassigned)

Tracking

(Blocks: 1 bug, {css2})

Trunk
mozilla8
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(3 attachments)

(Reporter)

Description

7 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.9.2) Gecko/20100115 Firefox/3.6 (.NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.9.2) Gecko/20100115 Firefox/3.6 (.NET CLR 3.5.30729)

Take any HTML with links, this examplary:

<a href="http://www.postgresql.org/docs/current/static/datatype-numeric.html">numeric types</a>

Associate the following CSS (the rule means "put a small 'link external' PNG after the link if it starts with 'http'"):

a[href^="http"]:after
{
    content: url(/images/link-external.png);
}

Now also define a general hover (or other) underline rule:

a:hover
{
    color: red;
    text-decoration: underline;
}

All external links will be rendered with the image being underlined, too, as well as the whitespace between the image and the text. This looks really ugly. Instead, only the text should be underlined. It should look like in IE 8...

Reproducible: Always

Steps to Reproduce:
1. see details
2.
3.
Actual Results:  
Underlined image + whitespace

Expected Results:  
Non-underlined image + whitespace

Not underline image + whitespace :-)
(Reporter)

Updated

7 years ago
Keywords: css2
Version: unspecified → 3.6 Branch
(Reporter)

Updated

7 years ago
Summary: CSS: a:before and a:after selectors with images as background and a:hover underline renders underlined image and whitespace → CSS: a:before and a:after selectors with images/icons as content and a:hover underline rule renders underlined image and whitespace
(Reporter)

Comment 1

7 years ago
Created attachment 432391 [details]
Firefox rendering
(Reporter)

Comment 2

7 years ago
Created attachment 432392 [details]
IE rendering

Comment 3

7 years ago
I've written some testing at http://pastebin.mozilla.org/708107, did not get the image underlined. Can you submit an HTML attachment please?
(Reporter)

Comment 4

7 years ago
Tried some hours, it seems to be doctype related. Any doctype I tried XHTML 1.1, XHTML 1.0 strict and trans, HTML 4.01 strict and trans cause the behavior. Omitting the doctype renders those links correctly.

I put the correction up into pastebin for you to see the underlined image. Hope this gets fixed soon.
(Reporter)

Comment 5

7 years ago
Created attachment 432823 [details]
HTML showing the described behavior

Comment 6

7 years ago
Related to/duplicate of Core bug 280296?
Slightly, but really it's a duplicate of the bug (or one of the sub-bugs :-) on rewriting text-decoration to follow the new CSS 2.1 rules, since those rules say images don't get underlined.
Component: General → Layout: Block and Inline
OS: Windows XP → All
Product: Firefox → Core
QA Contact: general → layout.block-and-inline
Hardware: x86 → All
Summary: CSS: a:before and a:after selectors with images/icons as content and a:hover underline rule renders underlined image and whitespace → text-decoration should not underline images (imgs)
Version: 3.6 Branch → 1.9.2 Branch
Depends on: 403524
Blocks: 605520

Comment 8

6 years ago
The patch for bug 403524 makes it so that text-decorations are drawn only on text in all modes.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED

Updated

6 years ago
Target Milestone: --- → mozilla8
(Reporter)

Comment 9

6 years ago
Which version of Firefox 3 will be the first one to show this fix?
Firefox 8, most likely.  (Firefox 3.6.* receives security updates only.)
Version: 1.9.2 Branch → Trunk
You need to log in before you can comment on or make changes to this bug.