CODEWITHSUNDEEP
csshtml
Jason
Jason

Reputation: 15

Unresponsive hyperlinks in firefox

I've created two buttons that act as hyperlink. They work on Chrome but aren't responsive on Firefox.

Sorry, I'm new to html/css and do not what I may be doing wrong. 

.btn-language-group {
  position: fixed;
  z-index: 120;
  bottom: 30px;
  right: 30px;
  background-color: Transparent;
}
<div class="btn-language-group">
  <button class="button button1">
		        <a href="index-B.html"> flag
			        <i class="flag-icon flag-icon-es"></i></button>
  </a>

  <button class="button button2">
		        <a href="index.html"> flag
			        <i class="flag-icon flag-icon-gb-wls"></i></button>
  </a>
  </button>
</div>

Upvotes: 0

Views: 57

Answers (2)

Asa
Asa

Reputation: 31

This site has the answer your question. To quote them:

Spec says, that inside of <button> you can have only phrasing content. That is, the <a> element inside <button> won't be interactive (clickable). Your code is simply invalid.

A simple reordering of elements should fix your problem.

<div class="btn-language-group">
    <a href="index-B.html"> 
       <button class="button button1">
	  <i class="flag-icon flag-icon-es">flag</i>
       </button>
    </a>

  
    <a href="index.html">
      <button class="button button2">           
        <i class="flag-icon flag-icon-gb-wls">flag</i>
      </button>
    </a>
</div>

Disclaimer: I don't claim this is best practice. I don't know how you would "normally" do this.

Upvotes: 1

dwjohnston
dwjohnston

Reputation: 11803

Your HTML isn't syntactically correct. 

  <button class="button button1">
                <a href="index-B.html"> flag
                    <i class="flag-icon flag-icon-es"></i></button>
  </a>

Here, you are closing the button tag, before you close the a tag.

Web browsers will attempt to correct for HTML errors, and make a guess at how to close the tags properly, rather than just showing an error on the page, but this can lead to confusing results. The correct way to resolve it, is to make sure your HTML syntax is correct.

Additionally - it looks like you're trying to nest an a tag inside of a button tag - which you shouldn't need to do.

Take a look at the documentation for the a tag and the button tag, also read this article about a vs button, as a general rule of thumb, use a as a link to somewhere, and use button as an action.

If you want to style an a tag as a button, you can just style the a tag with CSS

eg: 

a {
 text-decoration: none; 
 background-color: #ddd; 
 padding: 1em;
 border: 2px solid #666; 
 border-radius: 1em;
 margin: 1em; 
 display:inline-block; 
 
}

a:hover {
 background-color: #ccc; 
}
<a href = "#"> hello world! </a>

Or you could use a library like Bootstrap

Upvotes: 1

Related Questions