Broken Buttons in Firefox / Mozilla when they work in Microsoft Edge and Chrome!?

Broken Buttons in Firefox / Mozilla when they work in Microsoft Edge and Chrome!?

Issue:

I have two links inside buttons but the links don’t seem to work on Firefox, but they work on other browsers.  Is this a Firefox issue? Or maybe the tracking image included in the Amazon Link?  But they both don’t work and the link below them does work. Can you help?

Solution:

Yes, I see what is happening.

<a> is not allowed inside <button>
This doesn't work because it is not allowed by HTML5:

If it does work in some browsers it’s just because they’re trying to play nice with malformed markup and provide some sort of meaningful result.

<a> is interactive content (regardless of whether it has an href apparently, but yours do).Thus you can't depend on having the links as children of the button and what Firefox is doing is correct. Use another element to contain the <a>

In other words: rewrite your HTML. If you want the links to look like they’re in a button, put them in a div element and style that to look like one.

Do something like this instead:

<div class="button">

<ul>
<li><a href="#">Button Text</a></li>
<li><a href="#">Button Text</a></li>

Remember to define .button in your CSS


Leave a Reply