0

I've run into a problem I have never seen before with my site. I have 'a' links that go to other pages in the site, and they work perfectly in Edge, Chrome, and Safari, but Firefox won't open them. I just tap away and nothing happens.

My Nav CSS For the Issue:

.navigation {
width: 75%;
position: relative;
left: 13em;
top: 3em;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
}

.dropbtn {
background-color: transparent;
color: white;
font-size: 34px;
font-family: 'Anton', sans-serif;
border: none;
cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
background-color: #680b1e;
}

#about {
position: relative;
display: inline-block;
float: left;
margin-left: 40px;
}

HTML

<div id="about">
<button class="dropbtn"> <a href="about.html"> Book </a> </button>    
</div>
Jeff
  • 11
  • 7

1 Answers1

0

The problem is the HTML, a is not allowed to inside button, see this question for more details:

Link inside a button not working in firefox

A possible workaround could be to use the click event on the button to change window.location (using javascript), but it's not really recommended, again check the question I linked for more details about the workarounds and fixes.

angel9215
  • 163
  • 7
  • Also check the fix on this other question [Nesting a inside button doesn't work in firefox](https://stackoverflow.com/questions/16280684/nesting-a-inside-button-doesnt-work-in-firefox) – angel9215 Sep 28 '17 at 04:43
  • Thanks for the heads up I had no idea about 'a' not working in a button. – Jeff Sep 28 '17 at 04:45