I've encountered an issue with my simple css tabstrip. It seems to render correctly in:
- Safari 5.0.2 on Mac
- IE8 on PC
- FireFox 3.8.12 on PC
However, when viewed on FireFox 3.8.12 on Mac and Ubuntu, the tabs overlap the bottom border of the container div by 1 pixel. As I'm not well-versed in css, I haven't been able to find a solution that works consistently across all platforms.
Any ideas on how to address this?
Code:
<html>
<head>
<style type="text/css">
body {
font-family: Verdana, Arial;
}
#tabstrip {
width:700px;
border-bottom: 5px solid #6a8fa7;
font-size: 12px;
font-weight: bold;
display: block;
height: 21px;
margin: 0;
padding: 0 0 0px 0;
}
#tabstrip ul {
margin: 0;
padding: 1px 0 0 0;
list-style: none;
}
#tabstrip li {
display: inline;
float: left;
}
#tabstrip a {
color: #999999;
padding: 5px 8px;
margin-bottom: 4px;
background-color: #d7d7d7;
margin: 0 2px;
text-decoration: none;
}
#tabstrip a:first-child {
margin-left: 0;
}
#tabstrip a.selected {
background-color: #6a8fa7;
color: #fff;
text-shadow: 1px 1px 2px #666;
}
#tabstrip a.done {
background-color: #60b43f;
color: #fff;
text-shadow: 1px 1px 2px #666;
}
</style>
</head>
<body>
<br/><br/>
<div id="tabstrip">
<ul>
<li><a href="/" class="done">Item 1</a></li>
<li><a href="/" class="selected">Item 2</a></li>
<li><a href="/">Item 3</a></li>
<li><a href="/">Item 4</a></li>
<li><a href="/">Item 5</a></li>
</ul>
</div>
</body>
</html>