CSS Tabs Menu Looks Ugly When Changing Browser-zoom

Please look at my CSS Tabs menu: http://jsfiddle.net/NoGo/3Spru/ It uses the YAML 4 CSS Framework form yaml.de (Edit 2019: not actively developed anymore) The Tabs are: Home | User

Solution 1:

I could get it to look a lot better by using subpixel positioning and setting the margin-bottom and border-width to -1.5px and 1.5px respectively. It looks fine here at jsFiddle - with minimal effort - on 100% up to somewhere close to 200%, and you could probably get it to look even better at other zoom levels by going further down the subpixel rendering path.

But then it dawned on me that you don't really need to have that bottom border on the inactive tabs, just set the margin-bottom on the tabs to 0px and then set the margin-bottom at the .active and :hover class to -2px. This will automatically look fine on any zoom level, as you won't have to worry about 'lineing up the lines' at all. Here's a jsFiddle for this approach.

header nav ul li {
  display: inline-block;
  margin: 0 5px 0 0;
  border-top: 2px solid transparent;
  background-color: #f0f0f0;
  line-height: 180%;
  position: relative;
}
header nav ul li.active,
header nav ul li:hover {
  border-top: 2px solid #CA278C;
  border-bottom: 2px solid #FFF;
  background-color: #fff;
  margin-bottom: -2px;    
}