Cut off div problems in IE 6

hey guys. I'm remodeling a website for the college i attend and am having problems with one minute detail of the page.

if you visit: http://www.thecontrarianmagazine.com/piedmont/

you will notice the link bar across the top (tabbed sections) appear correctly in all browsers except IE. In IE, the tops of the tabs are cut off, and i cannot figure out why this is happening.

the links are made with a CSS as such:

a.nav {
width: 6em;
text-decoration: none;
color: #FFFFFF;
background-color: #175028;
padding: 0.2em 0.5em;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
}

they are displayed using UL and LI tags set up as such:

ul {
float: right;
width: 100%;
margin: 0px;
list-style-type: none;
}

li { display: inline;
height: 100%;
}

the CSS for the div they are located in appears as such:

.navigation {
background-color: #7b7458;

text-align: right;

font-family: Arial;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;

padding: 0px;

width: 760px;
height: 20px;

margin-left: -380px;
position: absolute;
top: 20px;
left: 50%;
}

any idea why this is happening?

 

Try the following:

.navigation {
background-color: #7b7458;
text-align: right;
font-family: Arial;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
padding: 0px;
width: 760px;
height: 20px;<= get rid
line-height:20px;
margin-left: -380px;
position: absolute;
top: 20px;<= get rid
top:15px;
left: 50%;
}