CODEWITHSUNDEEP
htmlbuttoninternet-explorer-8tags
David
David

Reputation: 565

<button> not working in IE8

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>

Upvotes: 11

Views: 29220

Answers (7)

Nathan
Nathan

Reputation: 3920

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]-->

Upvotes: 1

Biz Web
Biz Web

Reputation: 31

Cross Browser - works in MSIE 8 and FF 24+

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

Upvotes: 3

user1883212
user1883212

Reputation: 7859

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

Upvotes: 0

Dan Williams
Dan Williams

Reputation: 49

You could always use Javascript, which works cross browser -

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

Upvotes: 4

Jeff Clayton
Jeff Clayton

Reputation: 1

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>

Upvotes: 0

jchysk
jchysk

Reputation: 1588

You could try:

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

or putting the button in a form

Upvotes: 3

Esko
Esko

Reputation: 29375

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

Upvotes: 10

Related Questions