Jump to content

Menubar and links that don't work in FF and IE


hikingwithu2
 Share

Recommended Posts

I have a menubar that works great in Opera 49.0 but in Firefox 57.0.2(64bit) and IE11 there are no links, therefore it doesn't work at all. If I move the link urls outside the buttons they work as expected, but the buttons are completely messed up. What could possibly be the problem?

The html looks like this:

	    <div class="w3-bar menubar ">
      <div class="h1-bar">
        <button class="btnMenu"><a href="index.html">Home</a></button>
        <button class="btnMenu"><a href="courses.html">Courses</a></button>
        <button class="btnMenu"><a href="why.html">Why English?</a></button>
        <button class="btnMenu"><a href="contact.html">Contact</a></button>
      </div>
    </div>
	

And the .css looks like this:

	.menubar {
width: 100%;
clear:both;
padding:1em;
  box-shadow:0 .07em .07em black;
  background-color:yellow;
  border-left:.43em solid orange;
  border-radius:.57em;
}
.h1-bar a {
    color:#000;
    background-color:yellow;
    box-shadow:0 .15em .15em black, 0 0 1.8em orange, 0 0 .36em indigo;
    border-radius:.57em;
    padding:.5em;
    margin-top:1em;
}
	
Link to comment
Share on other sites

On 12/11/2017 at 9:51 AM, Ingolme said:

Don't use a button element, instead give the btnMenu class to the link itself.

I got it working, here's the code:

	<style>
	.menubar {
width: 100%;
clear:both; 
padding:.5em;
box-shadow:0 .07em .07em black;
background-color:yellow;
border-left:.43em solid orange;
border-radius:.57em;
}
.h1-bar a {
color:#000;
background-color:yellow;
box-shadow:0 .15em .15em black, 0 0 1.8em orange, 0 0 .36em indigo;
border-radius:.57em;
padding:.5em;
margin-top:.5em;
}
.bar {
width:100%;
overflow:hidden;
display:inline-block;
}
	.btnMenu {
float:left;
background: orange;
padding:.15em;
border-radius:.57em;
margin-right:.75em;
-webkit-transition: background-color .5s ease-out;
-moz-transition: background-color .5s ease-out;
-o-transition: background-color .5s ease-out;
transition: background-color .5s ease-out;
}
.btnMenu:hover {
background-color: red;
cursor: pointer;
}
.btnMenuReversed {
float:left;
background: pink;
padding:.75em;
margin:.5em;
border-radius:.57em;
-webkit-transition: background-color .5s ease-out;
-moz-transition: background-color .5s ease-out;
-o-transition: background-color .5s ease-out;
transition: background-color .5s ease-out;
}
.btnMenuReversed:hover {
background-color: green;
cursor: pointer;
}
	</style>
	<div class="bar menubar">
        <div class="h1-bar">
          <div class="btnMenu"><span class="btnMenuReversed"><a href="index.html">Home</a></span></div>
          <div class="btnMenu"><span class="btnMenuReversed"><a href="courses.html">Courses</a></span></div>
          <div class="btnMenu"><span class="btnMenuReversed"><a href="why.html">Why English?</a></span></div>
          <div class="btnMenu"><span class="btnMenuReversed"><a href="contact.html">Contact</a></span></div>
        </div>
      </div>
	

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...