Button inside of anchor link works in Firefox but not in Internet Explorer?
HtmlInternet ExplorerFirefoxButtonCross BrowserHtml Problem Overview
Everything else in my site seems to be compatible with all browsers except for my links. They appear on the page, but they do not work. My code for the links are as follows-
<td bgcolor="#ffffff" height="370" valign="top" width="165">
<p>
<a href="sc3.html">
<button style="width:120;height:25">Super Chem #3</button>
</a>
<a href="91hollywood.html">
<button style="width:120;height:25">91 Hollywood</button>
</a>
<a href="sbubba.html">
<button style="width:120;height:25">Super Bubba</button>
</a>
<a href="afgoohash.html">
<button style="width:120;height:25">Afgoo Hash</button>
</a>
<a href="superjack.html">
<button style="width:120;height:25">Super Jack</button>
</a>
<a href="sog.html">
<button style="width:120;height:25">Sugar OG</button>
</a>
<a href="91pk91.html">
<button style="width:120;height:25">91 x PK</button>
</a>
<a href="jedi1.html">
<button style="width:120;height:25">Jedi</button>
</a>
</p>
<p> </p>
<a href="http://indynile99.blogspot.com">
<button style="width:120;height:25">Blog</button>
</a>
<p> </p>
</td>
Html Solutions
Solution 1 - Html
You can't have a <button>
inside an <a>
element. As W3's content model description for the <a>
element states:
> "there must be no interactive content descendant."
(a <button>
is considered interactive content)
To get the effect you're looking for, you can ditch the <a>
tags and add a simple event handler to each button which navigates the browser to the desired location, e.g.
<input type="button" value="stackoverflow.com" onClick="javascript:location.href = 'http://stackoverflow.com';" />
Please consider not doing this, however; there's a reason regular links work as they do:
- Users can instantly recognize links and understand that they navigate to other pages
- Search engines can identify them as links and follow them
- Screen readers can identify them as links and advise their users appropriately
You also add a completely unnecessary requirement to have JavaScript enabled just to perform a basic navigation; this is such a fundamental aspect of the web that I would consider such a dependency as unacceptable.
You can style your links, if desired, using a background image or background color, border and other techniques, so that they look like buttons, but under the covers, they should be ordinary links.
Solution 2 - Html
Just a note:
W3C has no problem with button inside of link tag, so it is just another MS sub-standard.
Answer:
Use surrogate button, unless you want to go for a full image.
CSS code below:
.button_surrogate span { margin:0; display:block; height:25px; text-align:center; cursor:pointer; .width:150px; background:url(left_button_edge.png) left top no-repeat; }
.button_surrogate span span { display:block; padding:0 14px; height:25px; background:url(right_button_edge.png) right top no-repeat; }
.button_surrogate span span span { display:block; overflow:hidden; padding:5px 0 0 0; background:url(button_connector.png) left top repeat-x; }
HTML code below (button instance):
<a href="#">
<span class="button_surrogate">
<span><span><span>YOUR_BUTTON_LABEL</span></span></span>
</span>
</a>
Solution 3 - Html
$("a > button").live('click', function() {
location.href = $(this).closest("a").attr("href");
}); // fixed
Solution 4 - Html
The code below will work just fine in all browsers:
<button onClick="location.href = 'http://www.google.com'">Go to Google</button>
Solution 5 - Html
You cannot have a button inside an a
tag. You can do some javascript to make it work however.
Solution 6 - Html
If you're using a framework like Twitter bootstrap you could simply add class "btn" to an a tag -- I just had a user call in about this problem apparently my checkout button wasn't working because I had a button inside an a tag... instead I just added the btn class to it and it works perfectly now.. Big mistake, one that probably cost customers -- and I sometimes forget to code check everything works in IE..
E.g.
<a href="link.com" class="btn" >Checkout</a>
Solution 7 - Html
i found that this works for me
<input type="button" value="click me" onclick="window.open('http://someurl', 'targetname');">
Solution 8 - Html
Since this is only an issue in IE, to resolve this, I'm first detecting if the browser is IE and if so, use a jquery click event. I put this code into a global file so it's fixed throughout the site.
if (navigator.appName === 'Microsoft Internet Explorer')
{
$('a input.button').click(function()
{
window.location = $(this).closest('a').attr('href');
});
}
This way we only have the overhead of assigning click events to linked input buttons for IE. note: The above code is inside a document ready function to make sure the page is completely loaded before assigning click events.
I also assigned class names to my input buttons to save some overhead when using IE so I can search for
$('a input.button')
instead of
$('a input[type=button]')
.
<a href="some_link"><input type="button" class="button" value="some value" /></a>
On top of all that, I'm also utilizing CSS to make the buttons look clickable when your mouse hovers over it:
input.button {cursor: pointer}
Solution 9 - Html
<form:form method="GET" action="home.do"> <input id="Back" class="sub_but" type="submit" value="Back" /> </form:form>
This is works just fine I had tested it on IE9.
Solution 10 - Html
The problem here is that the link sits behind the button, even when changing the z-index. This markup is also invalid (read the spec). So the reason the links dont work is because you are actually clicking the button and not the link. The solution is to change your markup around.
<button type="button"><a href="yourlink">Link</a></button>
Then style as needed. A demo is here.
Solution 11 - Html
This is very simple actually, no javascript required.
First, put the anchor inside the button
<button><a href="#">Bar</a></button>
Then, turn the anchor tag into a block type element and fill its container
button a {
display:block;
height:100%;
width:100%;
}
Finally, add other styles as necessary.
Solution 12 - Html
just insert this jquery code to your HTML's head section:
<!--[if lt IE 9 ]>
<script>
$(document).ready(function(){
$('a > button').click(function(){
window.location.href = $(this).parent().attr('href');
});
});
</script>
<![endif]-->
Solution 13 - Html
Why not just convert all <button>
to <span>
with type="button"
and then style with your normal css button classes? Just confirmed that this works in IE11.