Button will not click in Firefox or IE

I've created a button using HTML/CSS and a Java script. The button should direct someone to a different page, but it is not working. It works great in Chrome and Safari, but will not work in Firefox.

Can anyone help with code so that it works in Firefox and IE?

Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
    <title>WTF</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<style type="text/css">


button{
color:#08233e;
font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
font-size:70%;
padding:14px;
background:url(overlay.png) repeat-x center #ffcc00;
background-color:rgba(255,204,0,1);
border:1px solid #ffcc00;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border-bottom:1px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
cursor:pointer;
}

button:hover{background-color:rgba(255,204,0,0.8);}

</style>

<body>

<button><a href="http://www.ihatelebronjames.com" class="button1">LEBRON IS A NO-GOOD, BACK-STABBING, AFRAID-OF-THE-MOMENT CHOKE ARTIST!</a></button><br>
<button><a href="http://www.lebronjames.com" class="button2">LEBRON IS THE PINNACE OF BASKETBALL PERFECTION!</a></button>            


</body>

</html>

Answers


A very easy fix is :

<a href="http://www.lebronjames.com" class="button2"><button>LEBRON IS THE PINNACE OF BASKETBALL PERFECTION!</button></a>  

Putting the button tag inside the a tag

Another (and better practice ) option :

http://jsfiddle.net/a6seL/

Here we just add a class "button2" to the <a>. We then style it as you did with <button>, but to really get the button look we also add display : block to the class.

Now you only need the <a> and no more <button>.

See my jsfiddle for that.


Use either a link or a button. It does not really make sense to mix the two. If you want a link, use a link. If you want a button, use a button.

Using a button (or any other element) ONLY for styling purposes is a terribly bad practice. Adjust your CSS to your semantic, meaningful HTML.

Also, in XHTML 1.0, you simply cannot put an <a> into a <button>:

<!-- button uses %Flow; but excludes a, form and form controls -->

<!ENTITY % button.content    "(#PCDATA | p | %heading; | div | %lists; | %blocktext; |
    table | %special; | %fontstyle; | %phrase; | %misc;)*">

from the XHTML 1.0 Transitional DTD (which you are using)


I think if you wrap the anchor outside of the button it will properly, although I am not 100% sure of how to implement a valid ink for a button


You can't do that, button is not to redirect, you can create a link and make it look like a button with CSS or you can create a button and give it JS functionalities, like this:

<button onclick="self.location=('http://www.ihatelebronjames.com');">LEBRON IS A NO-GOOD, BACK-STABBING, AFRAID-OF-THE-MOMENT CHOKE ARTIST!</a></button><br>
<button onclick="self.location=('http://www.lebronjames.com');">LEBRON IS THE PINNACE OF BASKETBALL PERFECTION!</a></button>    

Need Your Help

How to bind objects in NSDictionary in NSUserDefaults?

cocoa interface-builder nsdictionary nsuserdefaults cocoa-bindings

How do I bind NSDictionary objects to several text fields in Interface Builder?

jquery fullcalendar eventclick not working in week / day view

jquery fullcalendar

the select event works properly, but the eventClick is not working for these views (agendaWeek / agendaDay) although it works fine in the month view