Last Comment Bug 731447 - <button> element inside an anchor element is underlined
: <button> element inside an anchor element is underlined
Status: RESOLVED FIXED
: regression, testcase
Product: Core
Classification: Components
Component: Layout: Block and Inline (show other bugs)
: Trunk
: All All
: -- normal (vote)
: mozilla15
Assigned To: Boris Zbarsky [:bz]
:
Mentors:
Depends on: 834737
Blocks: 403524
  Show dependency treegraph
 
Reported: 2012-02-28 16:08 PST by Max
Modified: 2015-04-16 11:00 PDT (History)
10 users (show)
bzbarsky: in‑testsuite+
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
Testcase (329 bytes, text/html)
2012-02-29 02:05 PST, Max
no flags Details
Make buttons display:inline-block by default so that underlines don't reach into them. (3.43 KB, patch)
2012-05-31 23:00 PDT, Boris Zbarsky [:bz]
dbaron: review+
Details | Diff | Splinter Review

Description Max 2012-02-28 16:08:11 PST
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) 2012-02-28 16:48:45 PST
Please provide a public URL or reduced test case that exhibits this issue.
Comment 2 Max 2012-02-29 02:05:06 PST
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.
Comment 3 Alice0775 White 2012-02-29 02:41:33 PST
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. 2012-02-29 03:19:38 PST
(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 [:bz] 2012-02-29 07:57:21 PST
David, should we be checking the IsReplaced() thing wherever we currently check for inline-block in text-decoration code?
Comment 6 Boris Zbarsky [:bz] 2012-02-29 08:00:17 PST
ccing vitor too, since he touched this stuff last.
Comment 7 Boris Zbarsky [:bz] 2012-02-29 08:08:48 PST
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. 2012-02-29 13:00:13 PST
> 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 2012-03-01 11:44:23 PST
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 [:bz] 2012-03-01 11:48:29 PST
> 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+2 (review requests must explain patch) 2012-03-01 12:00:51 PST
I'd be fine with comment 5, comment 7, or both.
Comment 12 Ruvim Pinka 2012-03-01 12:17:31 PST
(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. 2012-03-01 21:30:23 PST
(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 2012-03-02 01:16:43 PST
(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. 2012-03-02 04:54:13 PST
(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 [:bz] 2012-05-31 23:00:44 PDT
Created attachment 629065 [details] [diff] [review]
Make buttons display:inline-block by default so that underlines don't reach into them.
Comment 17 David Baron :dbaron: ⌚️UTC+2 (review requests must explain patch) 2012-05-31 23:13:14 PDT
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 [:bz] 2012-06-01 08:46:57 PDT
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 22 demutis 2015-04-16 10:58:20 PDT
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 [:bz] 2015-04-16 11:00:29 PDT
> 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.

Note You need to log in before you can comment on or make changes to this bug.