1

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>
Kieran
  • 2,554
  • 3
  • 26
  • 38
Matt Murphy
  • 1,529
  • 4
  • 16
  • 17
  • 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
  • 1
    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

1 Answers1

2

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>
Chris
  • 44,602
  • 16
  • 137
  • 156
0b10011
  • 18,397
  • 4
  • 65
  • 86