CSS tab menu looks ugly on browser zoom
Please have a look at my CSS Tabs Menu: http://jsfiddle.net/NoGo/3Spru/
It uses the YAML 4 CSS Framework form yaml.de (Edit 2019: no longer under development)
Tabs: Home | Members | map
My HTML:
<nav>
<div class="ym-wrapper">
<div class="ym-wbox">
<ul>
<li>
<a href="#">
<div>Home <i class="icon-home"></i></div>
<span>Go to Main Page</span>
</a>
</li>
<li class="active">
<a href="#" class="">
<div>Users <i class="icon-search"></i></div>
<span>Search User Accounts</span>
</a>
</li>
<li>
<a href="#">
<div>Map <i class="icon-globe"></i></div>
<span>Users near you</span>
</a>
</li>
</ul>
</div>
<div class="ym-clearfix"></div>
</div>
</nav>
CSS:
header nav {
clear: both;
width:100%;
position:relative;
white-space: nowrap;
padding-top:10px;
border-bottom: 2px solid #CA278C;
}
header nav ul {
list-style: none;
padding:0;
margin:0;
display:inline;
}
header nav ul li {
display: inline-block;
border-top: 2px solid transparent;
margin: 0 5px -2px 0;
background-color: #f0f0f0;
border-bottom: 2px solid #CA278C;
line-height: 180%;
}
header nav ul li.active,
header nav ul li:hover {
border-top: 2px solid #CA278C;
border-bottom: 2px solid #fff;
background-color: #fff;
}
header nav ul li.active {
border-right: 2px solid #CA278C;
border-left: 2px solid #CA278C;
}
header nav ul li a {
display: inline-block;
padding: 5px 16px;
}
header nav ul li a div {
text-transform: uppercase;
font-weight: bold;
font-size: 16px;
}
header nav ul li a span {
font-size: 11px;
color: #999
}
header nav [class^="icon-"],
header nav [class*=" icon-"] {
vertical-align: baseline;
line-height: inherit;
opacity: 0.7;
}
My problem: When I change the browser zoom, the results look terrible. Is there a better way than working with margin-bottom: -2px
for elements li
?
source to share
I could make it look much better by using subpixel positioning and setting margin-bottom
both border-width
to -1.5px
and 1.5px
accordingly. It looks great injsFiddle - with minimal effort - on 100%
up to somewhere near 200%
, and you could get it to look even better at other zoom levels by going further down the subpixel rendering path.
But then it became clear to me that you really don't need to have this bottom border on inactive tabs, just set margin-bottom
on tabs to 0px
and then set margin-bottom
to .active
and :hover
to -2px
. This will automatically look great at any zoom level, since you don't have to worry about "line-up" at all. See herejsFiddle 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;
}
source to share