Hi all,
I'm trying to create a tab based menu using unordered lists and CSS(3).
The sample can be seen here : http://prashantraju.com/pat/tabs.html or code here:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
/* Reset */
html {
margin:0;
padding:0;
border:0;
}
body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* This helps to make newer HTML5 elements behave like DIVs in older browers */
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
display:block;
}
/* Line-height should always be unitless! */
body {
line-height: 1.5;
background: white;
}
/* Tables still need 'cellspacing="0"' in the markup. */
table {
border-collapse: separate;
border-spacing: 0;
}
/* float:none prevents the span-x classes from breaking table-cell display */
caption, th, td {
text-align: left;
font-weight: normal;
float:none !important;
}
table, th, td {
vertical-align: middle;
}
/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
blockquote, q { quotes: "" ""; }
/* Remove annoying border on linked images. */
a img { border: none; }
/* Remember to define your own focus styles! */
:focus { outline: 0; }
/* Eof reset */
/* Tab */
#tabs {
padding: 10px
}
#tabs ul {
border-bottom: 1px solid #d5d5d5;
margin: 0;
padding: 0;
}
#tabs ul li {
display: inline;
list-style-type: none;
}
#tabs ul li a {
background: #f9f9f9;
border-top: 1px solid #d5d5d5;
border-right: 1px solid #d5d5d5;
border-left: 1px solid #d5d5d5;
margin-left: 5px;
text-shadow: 1px 1px 0 #ffffff;
-moz-border-radius: 2px 2px 0 0;
-webkit-border-radius: 2px 2px 0 0;
color: #666;
text-decoration: none;
padding: 5px 5px 4px 5px;
}
#tabs ul li a:hover {}
#tabs ul li a:active,
#tabs ul li.selected a {
background: #ffffff;
background: -moz-linear-gradient(top, #f3f3f3 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#ffffff));
border-bottom: 1px solid #ffffff;
color: #333333;
font-weight: bold;
}
/* Eof tab*/
</style>
</head>
<body>
<div id="tabs">
<ul>
<li class="selected"><a href="#">I'm a tab!</a></li>
<li><a href="#">Look, I'm also a tab!</a></li>
<li><a href="#">I'm also a tab</a></li>
</ul>
</div>
</body>
For some reason it renders fine in Firefox however in Chrome it adds an extra pixel of padding on the bottom which covers up bottom border (see image below)
Does anyone know a fix for this? I'm currently using Eric Meyers reset as well.