CODEWITHSUNDEEP
htmlcss
Alex
Alex

Reputation: 6665

Button inside link doesn't work in IE

I have sitewiode styling of buttons using the html element. For buttons that submit forms this works well. However some buttons are just links. Therefore I use this syntax:

<a href="#"><button>Link Text</button></a>

This works perfectly in all browsers except IE, where the button clicks but nothing happens. The link isn't followed.

How can I get this to work in IE?

Upvotes: 2

Views: 5997

Answers (3)

Michel H&#233;bert
Michel H&#233;bert

Reputation: 282

Could you post more code? As it stands, a <button> element inside a link element isn't a proper way to do this. Stick to semantics. You should just style the <a> element using CSS. If you really want to stick to using that combination, IE requires you to use type="button". So <button type="button"></button>

Upvotes: 0

Christopher Crawford
Christopher Crawford

Reputation: 11

This is my issue also. Using code:

<a href="table_of_contents.html" title="Table of Contents"> 
    <button> <b>Contents</b> </button> 
</a>

It works for Firefox and Safari; but fails for Explorer and Opera. Tried answer from Michel:

Contents

No change: Firefox and Safari OK; Explorer and Opera NG.

I have changed to the following code, which works for all four browsers.

<form action="table_of_contents.html"> 
    <input value="Contents" title="Table of Contents" 
        style="font-weight: bold" type="submit"> 
</form>

PS: This does NOT work for type="button". Hope this helps.

Upvotes: -2

SeanCannon
SeanCannon

Reputation: 78046

Don't put the button inside the link. You can easily style the <a> to look just like the <button> with CSS.

Upvotes: 8

Related Questions