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-     lt td bgcolor   ffffff  height  370  valign  top  width  165  gt       lt p gt           lt a href  sc3 html  gt               lt button style  width 120 height 25  gt Super Chem  3 lt  button gt           lt  a gt            lt a href  91hollywood html  gt               lt button style  width 120 height 25  gt 91 Hollywood lt  button gt           lt  a gt            lt a href  sbubba html  gt               lt button style  width 120 height 25  gt Super Bubba lt  button gt           lt  a gt            lt a href  afgoohash html  gt               lt button style  width 120 height 25  gt Afgoo Hash lt  button gt           lt  a gt            lt a href  superjack html  gt               lt button style  width 120 height 25  gt Super Jack lt  button gt           lt  a gt            lt a href  sog html  gt               lt button style  width 120 height 25  gt Sugar OG lt  button gt           lt  a gt            lt a href  91pk91 html  gt               lt button style  width 120 height 25  gt 91 x PK lt  button gt           lt  a gt            lt a href  jedi1 html  gt               lt button style  width 120 height 25  gt Jedi lt  button gt           lt  a gt       lt  p gt       lt p gt  amp nbsp  lt  p gt       lt a href  http   indynile99 blogspot com  gt           lt button style  width 120 height 25  gt Blog lt  button gt       lt  a gt       lt p gt  amp nbsp  lt  p gt   lt  td gt

User · Answer

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

User · Answer

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   Surrogate button can be put into  tag  safer  if you use spans  not divs   It can be styled to look like button  or anything else  It is versatile - one piece of css code powers all instances - just define CSS once and from that point just copy and paste html instance wherever your code requires it  Every button can have its own label - great for multi-lingual pages  easier that doing pictures for every language - I think  - also allows to propagate instances all over your script easier  Adjusts its width to label length - also takes fixed width if it is how you want it  IE7 is an exception to above - it must have width  or will make this button from edge to edge - alternatively to giving it width  you can float button left - css for IE7  a   width 150px   make note of dot before property  I usually target IE7 by adding such dot - remove dot and property will be read by all browsers  b  text-align center  - if you have fixed width  you have to have this to center text label c  cursor pointer  - all IE must have this to show link pointer correctly - good browsers do not need it  You can go step forward with this code and use CSS3 to style it  instead of using images  a  radius for round corners  limitation  IE will show them square  b  gradient to make it  button like   limitation  opera does not support gradients  so remember to set standard background colour for this browser  c  use  hover pclass to change button states depending on mouse pointer position etc  - you can apply it to text label only  or whole button  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     lt a href     gt     lt span class  button surrogate  gt        lt span gt  lt span gt  lt span gt YOUR BUTTON LABEL lt  span gt  lt  span gt  lt  span gt     lt  span gt   lt  a gt

User · Answer

lt form form method  GET  action  home do  gt           lt input id  Back  class  sub but  type  submit  value  Back    gt   lt  form form gt   This is works just fine I had tested it on IE9

User · Answer

You can t have a  lt button gt  inside an  lt a gt  element  As W3 s content model description for the  lt a gt  element states       there must be no interactive content descendant      a  lt button gt  is considered interactive content   To get the effect you re looking for  you can ditch the  lt a gt  tags and add a simple event handler to each button which navigates the browser to the desired location  e g    lt input type  button  value  stackoverflow com  onClick  javascript location href    http   stackoverflow com      gt    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

User · Answer

This is very simple actually  no javascript required   First  put the anchor inside the button   lt button gt  lt a href     gt Bar lt  a gt  lt  button gt    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

User · Answer

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        lt a href  link com  class  btn   gt Checkout lt  a gt

User · Answer

just insert this jquery code to your HTML s head section    lt  -- if lt IE 9   gt        lt script gt            document  ready function                   a  gt  button   click function                    window location href     this  parent   attr  href                                     lt  script gt   lt   endif -- gt

User · Answer

The code below will work just fine in all browsers    lt button onClick  location href    http   www google com   gt Go to Google lt  button gt

User · Answer

a  gt  button   live  click   function          location href     this  closest  a   attr  href           fixed

User · Answer

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    lt button type  button  gt  lt a href  yourlink  gt Link lt  a gt  lt  button gt    Then style as needed  A demo is here

User · Answer

i found that this works for me   lt input type  button  value  click me  onclick  window open  http   someurl    targetname     gt

User · Answer

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          lt a href  some link  gt  lt input type  button  class  button  value  some value    gt  lt  a gt    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

User · Answer

Why not just convert all  lt button gt  to  lt span gt  with type  button  and then style with your normal css button classes  Just confirmed that this works in IE11

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

Examples related to html

Examples related to internet-explorer

Examples related to firefox

Examples related to button

Examples related to cross-browser