Different Browsers impact on buttons?

Different Browsers impact on buttons?
0.0 0

#1
<div>My Top Line Buttons
	<a href="#top" class="btn"><label>About</label></a>
        <button class="btn"><a href="#portfolio"><label>Portfolio</label></a></button></div>

If I run the above code only the <a> reference will move to desired #top section of HTML doc but not <button> code in Firefox or IE. Both work in Chrome.

Also using only <a> make the environment no longer look like a button?!

Thanks for any ideas if anyone has seen a problem like this?


#2

#3

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. You were using three apostrophes instead of backticks. See this post to find the backtick on your keyboard.


#4

Okay. Thanks for info on backticks. Any comment on difference of browsers? That’s why I added the link to codepen.io…~Kevin


#5

In Firefox, you can’t use:

<button class="btn"><a href="#portfolio">Button Text</a></button>

The following should work in all browsers:

<a href="#"><button class="btn">Button Text</button></a>

If you look in your console of Firefox (not the Codepen console), you will see you have an error about JQuery. You have to put JQuery before Bootstrap in the JS section to make it work. Also, if you are really going to use Bootstrap, you need to add Bootstrap to the CSS section.


#6

Thanks for this info…I’ll give it a try. It seems that Chrome is easier to make work?! So I’ll try to make it work with Chrome and then see how it does with Firefox. ~Thanks again, Kevin