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>

Answer 1

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>