Unresponsive hyperlinks in firefox

Question

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>

Hi Jason - did you know you can embed HTML and CSS directly into your question? — dwjohnston, Sep 04 '18 at 22:08
It might help if you attach of a screenshot that shows what it's supposed to look like, and what's not working - because as it currently is - it's not certain what you're trying to achieve. — dwjohnston, Sep 04 '18 at 22:10
can you try moving your ending A anchor tag within the button tag? at the moment they are not in the correct order and mismatching. try, as an example order — PKCS12, Sep 04 '18 at 22:15

Asa · Answer 1 · 2018-09-04T22:28:26.870

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.

score 1 · Answer 2 · answered Sep 04 '18 at 22:24

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

Unresponsive hyperlinks in firefox

2 Answers2