hikingwithu2 Posted December 10, 2017 Share Posted December 10, 2017 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 More sharing options...
Ingolme Posted December 11, 2017 Share Posted December 11, 2017 Don't use a button element, instead give the btnMenu class to the link itself. Link to comment Share on other sites More sharing options...
hikingwithu2 Posted December 12, 2017 Author Share Posted December 12, 2017 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now