The default bug view has changed. See this FAQ.

<button> element inside an anchor element is underlined

RESOLVED FIXED in mozilla15

Status

()

Core
Layout: Block and Inline
RESOLVED FIXED
5 years ago
2 years ago

People

(Reporter: Max, Assigned: bz)

Tracking

({regression, testcase})

Trunk
mozilla15
regression, testcase
Points:
---
Dependency tree / graph
Bug Flags:
in-testsuite +

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

5 years ago
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0.1) Gecko/20100101 Firefox/8.0.1
Build ID: 20111120135848

Steps to reproduce:

I created an html page containing a <button> element inside an <a href...> element.



Actual results:

Expected to see a button without any decoration but it appears undelined.


Expected results:

A <button> element inside an <a href...> element should have appeared without any decoration like it appears in other browsers (IE, Opera, Chrome).

Adding style 'display:inline-block' (or some others) to button element makes it appear without any decoration.
(Reporter)

Updated

5 years ago
Component: General → General
Product: Core → Firefox

Comment 1

5 years ago
Please provide a public URL or reduced test case that exhibits this issue.
(Reporter)

Updated

5 years ago
(Reporter)

Comment 2

5 years ago
Created attachment 601556 [details]
Testcase

If I apply style 'text-decoration:inline-block' (or some others, like float:left etc)  to the button it removes underline style.
(Reporter)

Updated

5 years ago

Updated

5 years ago
Attachment #601556 - Attachment mime type: text/plain → text/html

Comment 3

5 years ago
Regression window(m-c)
Works:
http://hg.mozilla.org/mozilla-central/rev/be4b064f1159
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0a1) Gecko/20110804 Firefox/8.0a1 ID:20110804030732
Fails:
http://hg.mozilla.org/mozilla-central/rev/5d742d2e4304
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0a1) Gecko/20110803 Firefox/8.0a1 ID:20110804022245
Pushlog:
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=be4b064f1159&tochange=5d742d2e4304


Regression window(m-c)
Works:
http://hg.mozilla.org/integration/mozilla-inbound/rev/144add433e72
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0a1) Gecko/20110803 Firefox/8.0a1 ID:20110803113010
Fails:
http://hg.mozilla.org/integration/mozilla-inbound/rev/cfb447e2f21f
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0a1) Gecko/20110803 Firefox/8.0a1 ID:20110803114009
Pushlog:
http://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=144add433e72&tochange=cfb447e2f21f
Suspected: Bug 403524
Blocks: 403524
Status: UNCONFIRMED → NEW
Ever confirmed: true
Keywords: regression

Comment 4

5 years ago
(In reply to Max from comment #0)

> I created an html page containing a <button> element inside an <a href...>
> element.

BTW, you should not do that because it's invalid HTML
("The element button must not appear as a descendant of the a element.")

Anyway, it's a bug and also triggered by generic markup like this:

<span style="text-decoration:underline"><button>button</button></span>
Component: General → Layout: Block and Inline
Keywords: testcase
OS: Windows 7 → All
Product: Firefox → Core
QA Contact: general → layout.block-and-inline
Hardware: x86_64 → All
Version: 8 Branch → Trunk
David, should we be checking the IsReplaced() thing wherever we currently check for inline-block in text-decoration code?
ccing vitor too, since he touched this stuff last.
If I put a "display: inline" on the button, then WebKit shows the underline while Presto does not.  What does Trident do?

If we want to have the WebKit behavior, it's just a matter of putting "display: inline-block" on button in the UA stylesheet....

Comment 8

5 years ago
> If I put a "display: inline" on the button, then WebKit shows the underline
> while Presto does not.  What does Trident do?

IE8 and IE9 do it like WebKit

Comment 9

5 years ago
In the first, Firefox does not obey to the CSS rule:  a button { text-decoration:none; }
(see also the testcase source).

I don't sure the decoration propagation from anchor to button is wrong (The specification is required clarification for me — 
http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration — )
> a button { text-decoration:none; }

Would have no effect; decorations on kids don't override decorations on parents per spec.

David, thoughts on comment 7?
I'd be fine with comment 5, comment 7, or both.

Comment 12

5 years ago
(In reply to Boris Zbarsky (:bz) from comment #10)
> decorations on kids don't override decorations on parents per spec.
Thank you. I missed this.

(In reply to j.j. (inactive in 2012) from comment #4)
> BTW, you should not do that because it's invalid HTML
> ("The element button must not appear as a descendant of the a element.")

What the spec says that?

Comment 13

5 years ago
(In reply to Ruvim Pinka from comment #12)
> What the spec says that?

Any HTML spec says that. Just validate your html file.
http://validator.nu/
http://validator.w3.org/

Comment 14

5 years ago
(In reply to j.j. (inactive in 2012) from comment #13)
> > What the spec says that?
> Any HTML spec says that.

As I understand, HTML 4.01 allows any inline elements (including BUTTON) inside 'A', except nested 'A'. http://www.w3.org/TR/html4/struct/links.html#edef-A


> Just validate your html file.
"validator" is not specification ;)

> http://validator.w3.org/

For example please look at this: http://validator.w3.org/check?uri=http%3A%2F%2Fmarisdev.com%2Ftest%2Fanchor-n-button.xhtml&charset=%28detect+automatically%29&doctype=Inline&ss=1&group=0&user-agent=W3C_Validator%2F1.2

Comment 15

5 years ago
(In reply to Ruvim Pinka from comment #14)

> (In reply to j.j. (inactive in 2012) from comment #13)
> > > What the spec says that?
> > Any HTML spec says that.
> http://www.w3.org/TR/html4/struct/links.html#edef-A

Ok, I was wrong. But keep in mind that HTML5 supersedes all other HTML versions just today.

> For example please look at this:
> http://validator.w3.org/check?uri=http%3A%2F%2Fmarisdev.com%2Ftest%2Fanchor-
> n-button.
This is HTML as long as you serve it with text/html to your users.
http://hixie.ch/advocacy/xhtml

Please let's not do of-topic conversation here in detail. Bugzilla is not a discussion board.
Created attachment 629065 [details] [diff] [review]
Make buttons display:inline-block by default so that underlines don't reach into them.
Attachment #629065 - Flags: review?(dbaron)
Assignee: nobody → bzbarsky
Whiteboard: [need review]
Comment on attachment 629065 [details] [diff] [review]
Make buttons display:inline-block by default so that underlines don't reach into them.

r=dbaron
Attachment #629065 - Flags: review?(dbaron) → review+
Also needed to fix browser/components/safebrowsing/content/test/browser_bug400731.js which was asserting display:inline on buttons.

Pushed http://hg.mozilla.org/integration/mozilla-inbound/rev/3a73e65c935e
Flags: in-testsuite+
Whiteboard: [need review]
Target Milestone: --- → mozilla15
https://hg.mozilla.org/mozilla-central/rev/3a73e65c935e
Status: NEW → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → FIXED
https://hg.mozilla.org/mozilla-central/rev/7e9a4da0c1e8
https://hg.mozilla.org/mozilla-central/rev/d37a99fa6253

Updated

5 years ago
Summary: <button> element inside an anchor element is undelined → <button> element inside an anchor element is underlined
Depends on: 834737

Comment 22

2 years ago
April 16, 2014 this bug is still there!  My < Back button is displaying an underline.

Can't override this with CSS.  Why?
> My < Back button is displaying an underline.

Please file a bug with a testcase.  This bug is fixed, as you can see by loading the testcase above.

> Why?

This question is impossible to answer without knowing what your HTML and CSS looks like.
You need to log in before you can comment on or make changes to this bug.