Buttons As Links - Works In Everything But Explorer

[sempervirent]

For the user admin area on a social networking site, I've used the underutilized <button> tag to create some CSS-only buttons that function as links. These are not form submission buttons, so I don't want to use the <input> tag instead (which needs an additional unnecessary <form> tag to validate). I want to use the <button> tag instead because... they're buttons.The code looks like this:

<a href="edit_profile.htm"><button class="large green">Edit Profile</button></a>

This type of nesting is perfectly valid in XHTML 1.1, according to the W3. The problem, as usual, lies with Internet Explorer (all versions). The link doesn't go anywhere. I get the dotted outline on the link but the link is never activated and you're not forwarded to the target href of the <a> tag.Is there a workaround for this, or do I have to go back and re-code all those <button> tags to use the <a> tag instead?

[chibineku]

What's the </span> doing in there? That sort of mis-match of tags is the sort of thing that gets IE's knickers in a twist...

[sempervirent]

Oh, it's just a typo, I edited out some code to simplify. Good eye for detail. I've updated the original. The actual HTML page validates so there aren't, for example, any stray closing </span> tags.

[dsonesuk]

It looks as though the button tag link will only work for IE, if it is within an form element, and then use the action attribute to link to a specific page.<form action="http://google.com"><button type="submit">Click me!</button></form>Somehow, i don't think you will be adding a form element, around every single button element.

[sempervirent]

Alright, looks like the geniuses in Redmond have made my life easier again. I will swap my <button> tags for <a> tags and let it be.