I can't figure out how to fix the tabs so that the text is vertically centered and the other rounded corners of the tabs are shown.

Code: Select all
<style>
ol#toc
{
height: 2em;
list-style: none;
margin: 0;
padding: 0;
}
ol#toc li
{
float: left;
margin: 0 1px 0 0;
}
ol#toc a
{
background: url(images/Tabs.jpg);
color:#fff;
display:block;
float: left;
height: 2em;
padding-left: 10px;
text-decoration: none;
font-weight: normal;
font-family: Arial;
font-size: large;
}
ol#toc span {
background: url(images/Tabs.jpg) 100% 0;
display: block;
line-height: 2em;
padding-right: 10px;
}
ol#toc li.current
{
background-color: blue;
background-position: 0 -60px;
color: #fff;
font-weight: normal;
font-family: Arial;
font-size: large;
}
ol#toc li.current span {
background-color: blue;
background-position: 100% -60px;
color: #fff;
font-weight: normal;
font-family: Arial;
font-size: large;
}
ol#toc li.current a
{
background-color: blue;
background-position: 100% -60px;
color: #fff;
font-weight: normal;
font-family: Arial;
font-size: large;
}
ol#toc a:hover {
background-color: blue;
background-position: 0 -120px;
color: #fff;
font-weight: normal;
font-family: Arial;
font-size: large;
}
ol#toc a:hover span {
background-position: 100% -120px;
}
div.content
{
border: #FFB71A solid 3px;
clear: left;
padding: 1em;
}
</style>