-1

As you can see in [this][1] fiddle, on hover the hover-state of a always is one pixel higher than the ul. (You can see this in the fiddle: it even gets over the border of ul) This only happens in Chrome (also tested in FF en IE10, but they don't have that problem). Any solution to that?

Note: overflow: hidden is not a solution, because I want overflow to be visible for other stuff (sub-menus among others). 

ul {
  list-style: none;
  text-align: center;
  background: whiteSmoke;
  border: 1px solid red;
}
li {
  display: inline-block;
  font-size: 150%;
  position: relative;
  margin: 0;
}
li a {
  color: #555;
  text-decoration: none;
  text-shadow: 0 2px 0 white;
  display: block;
  padding: 0.2em 0.5em 0.3em;
}
li a:hover {
  color: black;
  background: whiteSmoke;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.125);
}
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Forum</a></li>
    <li><a href="#">About</a></li>
    <li class="has-sub-menu"><a href="#">Contact</a></li>
  </ul>
</nav>
Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239

1 Answers1

-1

If your menu is one pixel low in Chrome; there are two browser-specifc approaches that could apply correctional styling only in Chrome. See Similar Post Answered

CSS

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  position:relative;top:-1px;
}

JS

if (navigator.appVersion.indexOf("Chrome/") != -1) {
  // modify menu styling 
}
Community
  • 1
  • 1
Devon Bernard
  • 2,250
  • 5
  • 19
  • 32
  • And this would effect browsers who don't need the adjustment, too. – cimmanon Jan 11 '13 at 19:42
  • Because it's only a problem in Chrome, I would screw other browsers by doing so. – Bram Vanroy Jan 11 '13 at 19:42
  • @BramVanroy: I thought maybe it's better to have it the other way but ok... Also I posted a link to a guide that said chrome conditional formatting. – Devon Bernard Jan 11 '13 at 19:44
  • @Sparky: PHP knows what browser you are using so it can propose a conditional... I don't CSS can do that by itself. – Devon Bernard Jan 11 '13 at 19:49
  • How about just FIX THE CSS problem? – Sparky Jan 11 '13 at 19:50
  • 1
    Don't take it personally, but "fix the CSS" means _write clean CSS that works properly in all browsers_. Your suggestion is nothing more than a sloppy hack... again, just stating a fact, not a personal attack. Once the OP cleans up his example, others can suggest more appropriate answers. – Sparky Jan 11 '13 at 19:53
  • @Sparky: I wouldn't take it personally if everyone acts in a respectable and professional manner. But how else is he suppose to use browser conditional CSS code if CSS does not know what browser he is working in. Maybe CSS can somehow figure out what browser you are in but if it can't you have to use either Javascript or PHP so I posted a proper PHP solution. – Devon Bernard Jan 11 '13 at 19:58
  • 1
    Devin, he's not specifically asking how to make browser conditional CSS (absolute last resort). He's wanting to know why this is happening and how to fix his CSS. In other words, I am not suggesting that CSS should have the ability to figure out your browser... I am suggesting that one writes CSS that works in all browsers. – Sparky Jan 11 '13 at 20:04
  • @Sparky: Alright that makes sense, unfortunately I am not that knowledgeable in CSS to know which properties only apply to which browsers. Hopefully someone with more CSS skills can propose a CSS only answer but if not I hope mine will suffice and is able to fix the bug Bram is having. – Devon Bernard Jan 11 '13 at 20:13
  • Devon, thanks for your effort. As Sparky said, this will only be a last resort solution! – Bram Vanroy Jan 11 '13 at 20:44
  • @BramVanroy: That is understandable, hopefully someone will come along in the next few days and give you an only CSS solution. But if not at least you have something to work with. Have a good day, and I wish you the best of luck on your project. – Devon Bernard Jan 11 '13 at 20:51
  • Actually, I used the JS solution from the link you gave. Thanks! – Bram Vanroy Jan 12 '13 at 08:43