Button inside of anchor link works in Firefox but not in Internet Explorer?

Question

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>&nbsp;</p>
<a href="http://indynile99.blogspot.com"&gt;&lt;button style="width:120;height:25">Blog</button></a>
<p>&nbsp;</p>
</td>

THANKS for the help!

Answer 1

You cannot have a button inside an a tag. You can do some javascript to make it work however.

Answer 2

As previously answered you can not put a button inside a tag, but you could put an image that appears to be a button.

Answer 3

As Daniel states above, you can't have a <button> inside an <a> element.

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 recognise 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 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 colour, border and other techniques, so that they look like buttons, but under the covers, they should be ordinary links.

Answer 4

You can put a <button> inside of an <a> tag if you like and it will work on every single browser EXCEPT for Internet Explorer. This is because Microsoft makes Internet Explorer and MS does not follow industry standards because they are LAME... and so is their browser. Use Chrome, Safari, or Firefox instead. If I could get everyone to boycott Internet Explorer and make it cease to exist I soooo totally would. Do you know how much extra code web designers/programmers have to put in JUST so Internet Explorer will work the same as EVERY OTHER FRIGGIN BROWSER on the market already works? It's insane and totally uncalled for. Microsoft... I hope you DIE. That is all.

Now to answer the question. The code below will work just fine in all browsers:

<button onClick="location.href = 'http://www.google.com'"&gt;Go to Google</button>

Answer 5

work around for this button tag problem

Answer 6

I was experimenting with this. I set up my link the following way:

<a href = "http://www.LeviCar.com" STYLE="text-decoration:none" target=_blank> <input type=button value=LeviCar /></a>

When I clicked on the button, it opened not one but TWO new tabs, each with the same target webpage.

The STYLE="text-decoration:none" command simply gets rid of an underline, and has nothing to do with opening two tabs.

Just want you to know. I have to make my page compatible with Internet Exploder anyway, so I won't be using this.