Question

I have a number of buttons on my website using the button tag, and while rendering fine on IE8, they are not clickable (clicking them doesn't send the user to the new url). Are there any solutions to fix this for IE? Is it because I'm wrapping the button in an tag? Is it because I'm using a class name of "button"?

The code is:

<a href="product_home.html">
<button class="button green big_button">Learn more</button>
</a>

possible duplicate of [Button inside of anchor link works in Firefox but not in Internet Explorer?](http://stackoverflow.com/questions/802839/button-inside-of-anchor-link-works-in-firefox-but-not-in-internet-explorer) — Joe Enos, Aug 15 '11 at 05:59

score 10 · Accepted Answer · answered Aug 15 '11 at 06:01

10

Your markup is wrong, IE is not in fault here. Button is a form element which means that it requires a form around it point where the user should be sent - wrapping the button into a link tag isn't enough nor exactly valid, in fact I don't think it should work anywhere, not even in other browsers.

To read more about correct usage of <button/>, visit XHTML Reference: button

answered Aug 15 '11 at 06:01

Esko

29,022
11
55
82

4

It doesn't seem like there is real consensus here (especially based on the thread that Joe references above). Plus, it seems like the link around a button is ok according to the W3C. – David Aug 15 '11 at 07:00
This did work once I used a form to wrap the – David Aug 16 '11 at 03:33
I /just/ ran into an issue where at times, if you have , sometimes it'll submit 'action=blah'.. or 'action=blah2'. No flippin clue WHY, it just did for this app that took me ages to fix. I don't see this behavior in ANY other browser then ie8. – whiskeyfur Aug 09 '12 at 22:12
3

It works in IE9 and all versions of Chrome, so this answer is too harshly worded. It would be good to definitively answer whether a button in a link is good practice or not. In my case, I don't have any need for a form, I only need a thing that looks like a button and navigates to a new page. – AgilePro Sep 06 '13 at 22:24

score 4 · Answer 2 · answered Apr 22 '13 at 14:36

4

You could always use Javascript, which works cross browser -

<button onclick="location.href='http://www.google.com'">This is a button to google</button>

answered Apr 22 '13 at 14:36

Dan Williams

49
1
1

This worked for me. The other options did not work because (1) the style appeared different in 'div' and 'a' tags (2) the 'div' tag can not be placed in the middle of text the way a button can, and (3) the 'a' tag wraps on long text, and the style wraps with it in a strange way, and (4) the 'form' tag also can not be placed in the middle of text. – AgilePro Sep 06 '13 at 23:57
1

Inline JavaScript is always so sad and avoidable. http://stackoverflow.com/questions/19002690/why-inline-javascript-is-bad – emyller Oct 01 '13 at 14:14

score 3 · Answer 3 · answered Sep 26 '12 at 06:37

3

You could try:

<a href="product_home.html" class="button green big_button">Learn more</a>

or putting the button in a form

answered Sep 26 '12 at 06:37

jchysk

1,538
1
15
27

Thanks, I'm using Twitter Bootstrap and just removing the button and applying the classes to the a tag was all that was needed for IE8. – mrooney Mar 28 '13 at 20:51

score 3 · Answer 4 · answered Jun 20 '14 at 09:53

3

Cross Browser - works in MSIE 8 and FF 24+

<button onclick="location.href='myscript.php?id=$ID'" type="button">MyLink</button>.

answered Jun 20 '14 at 09:53

Biz Web

31
1

score 1 · Answer 5 · edited May 23 '17 at 12:08

See my other answer; I think this is a modern jQuery-based approach to patching this issue for old IEs, without mangling your nice clean markup.

<!--[if lt IE 9]>

<script type="text/javascript">
// IE8 is the new IE6. Patch up https://stackoverflow.com/questions/2949910/how-to-make-href-will-work-on-button-in-ie8
$('button').click(function(){
    document.location = $(this).parents('a').first().prop('href');
});
</script>

<![endif]-->

score 0 · Answer 6 · edited Apr 04 '13 at 18:37

sample usage:

<form id="myform" name="myform" action="product_home.html">
  <input id="user" name="user" type="text" value="" />
  <button class="button green big_button" type="submit">Learn more</button>
  <button class="button green big_button" type="reset"><b>reset the form!</b></button>
</form>

<script type="text/javascript">

var myform = document.getElementById('myform');

myform.onsubmit = function()
{
    alert(myform.user.value); 
if (myform.user.value != '') return true;
    return false;
}

</script>

score 0 · Answer 7 · answered Apr 22 '13 at 14:56

0

<a href="product_home.html">
<div class="button green big_button">Learn more</div>
</a>

answered Apr 22 '13 at 14:56

user1883212

7,539
11
46
82

7 Answers7

Linked

not working in IE8

7 Answers7

Linked