731447 - <button> element inside an anchor element is underlined

Status: RESOLVED FIXED

(Core :: Layout: Block and Inline, defect)

Description

[Max]

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.

Comment 1

[Tim (fmdeveloper)]

Please provide a public URL or reduced test case that exhibits this issue.

Comment 2

[Max]

Attachment: Testcase

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

Comment 3

[Alice0775 White]

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

Comment 4

[j.j.]

(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>

Comment 5

[Boris Zbarsky [:bzbarsky]]

David, should we be checking the IsReplaced() thing wherever we currently check for inline-block in text-decoration code?

Comment 6

[Boris Zbarsky [:bzbarsky]]

ccing vitor too, since he touched this stuff last.

Comment 7

[Boris Zbarsky [:bzbarsky]]

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

[j.j.]

> 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

[Ruvim Pinka]

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 — )

Comment 10

[Boris Zbarsky [:bzbarsky]]

> 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?

Comment 11

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

I'd be fine with comment 5, comment 7, or both.

Comment 12

[Ruvim Pinka]

(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

[j.j.]

(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

[Ruvim Pinka]

(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

[j.j.]

(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.

Comment 16

[Boris Zbarsky [:bzbarsky]]

Attachment: Make buttons display:inline-block by default so that underlines don't reach into them.

Comment 17

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Comment on attachment 629065 [details] [diff] [review]
Make buttons display:inline-block by default so that underlines don't reach into them.

r=dbaron

Comment 18

[Boris Zbarsky [:bzbarsky]]

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

Comment 19

[(no longer active)]

https://hg.mozilla.org/mozilla-central/rev/3a73e65c935e

Comment 20

[(no longer active)]

https://hg.mozilla.org/mozilla-central/rev/7e9a4da0c1e8

Comment 21

[(no longer active)]

https://hg.mozilla.org/mozilla-central/rev/d37a99fa6253

Comment 22

[demutis]

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

Can't override this with CSS.  Why?

Comment 23

[Boris Zbarsky [:bzbarsky]]

> 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.