CODEWITHSUNDEEP
html
user1136334
user1136334

Reputation:

Button link doesn't work in Firefox, IE

I have links inside of that work fine in Chrome, but not IE or Firefox. Nothing happens if you click on them. I've messed with the CSS (z-index included), but am out of ideas. This is XHTML coming out of Drupal.

The html looks like this:

<div class="product-display-block-link">
  <button>
    <a href="/checkout/outfield-banner/1">Add to cart</a>
  </button>
</div>

Any suggestions for where I can look?

Upvotes: 6

Views: 14617

Answers (5)

Peter Beddows
Peter Beddows

Reputation: 1

I had a similar situation and posted my question here => Why does Dreamweaver cc16, Bootstrap v3.3.6, created, hyperlinked Button work in Opera & Chrome but not IE or Firefox?

Here is my original code for a Button =>

The Button html code is: =>

<div align="center" style="font-size: 1.5em"> <button type="button" class="btn btn-lg"> <a href="https://howtoliveoffthegridnow.com/wordpress/get-your-own-off-the-grid-checklist/" title="Access option to download checklist"><strong>FREE: 11 Things To Know Before Going Off The Grid</strong></a> </button> </div>

and the relevant bootstrap.css v3.3.6 is linked conventionally using: =>

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css" />

That worked in Chrome and Opera but not IE or Firefox though, apparently, it should not have worked in any browser.

Here is what I changed that Button code element into =>

`<div class="btn btn-lg" style="background-color:#ffffff;">
 <a href="https://howtoliveoffthegridnow.com/wordpress/get-your-own-off-the-grid-checklist/" title="Access option to download checklist"><strong>FREE: 11 Things To Know Before Going Off The Grid</strong></a>

That works across all browser. /psb

Upvotes: 0

Roman Susi
Roman Susi

Reputation: 4199

Also, type attribute is missing. Different browsers assume different type, for example, not necessarily type="submit".

Upvotes: -1

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201886

The HMTL syntax does not allow an a element within a button element, so it is not surprising that it does not work across browsers. There should be no reason to use such a construct, since you can either style a link to look like a button or associate an action with a button, depending on what you wish to accomplish.

Upvotes: 16

Quentin
Quentin

Reputation: 944534

If you want a button (i.e. a thing to submit a form with or dangle JavaScript from), use a button. If you want a link, use a link. If you want a link that looks like a button, use a link then style it to look the way you want.

You can't mix the two because <button> elements aren't allowed to contain <a> elements. The definition of the element explicitly excludes them:

<!--
 Content is %Flow; excluding a, form and form controls
--> 
<!ELEMENT button %button.content;>  <!-- push button -->

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

Upvotes: 3

blake305
blake305

Reputation: 2236

<button> isn't being used right.

HTML:

 <div class="product-display-block-link">
    <button onClick="javascript: window.location='/checkout/outfield-banner/1'">Add to Cart</button>
</div>

See it in action here: http://jsfiddle.net/s8jtf/

Upvotes: 2

Related Questions