Getting the HTML5 'button' tag to work across browsers

Question

I am currently working on a university project, using HTML5. I have been writing all my code using the button tag throughout. I have been testing the site using chrome, however, have just noticed that although the buttons appear in IE and Firefox, they do not function.

Is there a way to get around this? Or does the button tag just not work in these browsers?

This is the code which works perfectly well in chrome, but not other browsers.

<div class="option" id="question1" style="display:none">
<p> Which way do you think the criminals have fled?</p>
<p>Up the Stairs <button class="arrow" id="stairs"><a href="upstairs.html"><img src="images/arrow.png" width="15" height="15"/></a></button></p>
<p>Down the Alley <button class="arrow" id="alley"><a href="alley.html"><img src="images/arrow.png" width="15" height="15"/></a></button></p>
</div>

It should be supported by IE and Firefox, can you provide a code fragment of what is not working? Also, what versions of IE and Firefox? — Danny, Jan 11 '12 at 20:17
The button tag has been there for quite a while, it's pre-HTML5 standards. — jValdron, Jan 11 '12 at 20:18
Much has been said about this in the past. Check out http://stackoverflow.com/questions/469059/button-vs-input-type-button-which-to-use — David Brainer, Jan 11 '12 at 20:22
Without a link or jsfiddle, anything we say is just a wild guess. — Rob, Jan 11 '12 at 20:24
@DavidBrainer-Banker - Your link is three years old and some of the links in that article don't work or refer to six-year old articles. — Rob, Jan 11 '12 at 20:27
I have edited the question and added code which works fine in Chrome, but not other browsers — Matt Murphy, Jan 11 '12 at 20:31
@Rob Valid, but the point is people have been discussing the use of buttons for a long time. As this is a university project I just wanted to give some idea as to how to find resources. — David Brainer, Jan 11 '12 at 20:36
@MattMurphy, was my answer helpful? If so, could you click accept? See http://stackoverflow.com/faq#howtoask. If not, could you give some feedback so I, or someone else, can provide a better answer? Thanks! — 0b10011, Mar 02 '12 at 15:19

score 2 · Accepted Answer · edited May 20 '13 at 09:42

The button element cannot have interactive descendants. Ergo, you cannot have an a tag as a child of the button element. Simply remove the a tag from the button, and change your code as necessary.

For more information, read up on the button Element in the HTML Specification.

Example

<div class="option" id="question1" style="display:none;">
<p>Which way do you think the criminals have fled?</p>
<p>Up the Stairs <button class="arrow" id="stairs"><img src="images/arrow.png" width="15" height="15"></button></p>
<p>Down the Alley <button class="arrow" id="alley"><img src="images/arrow.png" width="15" height="15"></button></p>
</div>

Getting the HTML5 'button' tag to work across browsers

1 Answers1

Example