[FIXED] Why does Dreamweaver cc16, Bootstrap v3.3.6, created, hyperlinked Button work in Opera & Chrome but not IE or Firefox?

Issue

Why does a Dreamweaver cc16, Bootstrap v3.3.6, created, hyperlinked Button set into a PHP 7 created html page, work in current version Opera & Chrome browsers but not in current version IE or Firefox browsers?

Page in question is: https://howtoliveoffthegridnow.com/index.php

The Button in question has the text: =>

FREE: 11 Things To Know Before Going Off The Grid

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" />`

This is a critical CTA link so any help in resolving this issue would be most gratefully received. Thank you. /psb

ps: In the case of Firefox, it does not appear to be an issue of Tracking Protection. I turned that off but makes no difference.

Problem found, tested, verified here on a Windows Pro 8.1, 64 bit AMD pc and on an ASUS Windows 8.1 tablet and a Sony Vaio Win Pro 7 Centrino2 laptop. Even works in Safari on the laptop!

Solution

The problem lies in the fact that I tried to use the bootstrap created Button incorrectly by adding an component to it. THat's not how this button is supposed t be used or to work.

Problem was compounded, also, by the fact that in the case of the 2 browsers that it would not work - IE and Firefox - by using the Inspect option, I discovered that they were not reading the bootstrap.css for reasons still a mystery to me, The other browsers had no problem reading the bootstrap.css but the fact that the Button worked in those browsers but not in IE or Firefox could not be explained that easily. Technically, the way I had incorporated and coded this Button, it should not have worked in any of the browsers.

The solution was to use a different option to show a form of functioning Button. Based upon excellent guidance I received from teh Support Team of AWeber, I changed my code as suggested by them and now it works across all browsers and all of my different test platforms.

Here is the solution:

`<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>

'

The issue is now closed. /psb

Answered By - Peter Beddows

Answer Checked By - Terry (PHPFixing Volunteer)