IE CSS display problem

Okay, on a menu for a site I have it displays fine in Firefox but in Internet Explorer it doesn't work. basically the a hover effect on a menu link(s). Above the top of the text doesn't hover.

View www.writingforums.org in IE to see what I mean and hover over "writing", "ezine" or "links".

Here's the CSS applied to these menu items:

div.vbmenu_control a
{
line-height:30px;
width:80px;
height:30px;
padding-right:10px;
padding-left:10px;
padding-top:6px;
padding-bottom:6px;
color:#FFFFFF;
background-color:#9EB1AF;
text-decoration: none;
}

div.vbmenu_control a:hover
{
line-height:30px;
width:80px;
height:30px;
padding-right:10x;
padding-left:10px;
padding-bottom:6px;
padding-top:16px;
color:#FFFFFF;
background-color: #CCD7D5;
text-decoration: none;

}

Code (markup):

Help is appreciated.

 

If it's only meant to change the colour, from what I can see at least(other than the strange padding-top differences) then it does work in IE the same way it works in FF.

 

Works for me except for the padding on the top of the links you mentioned - there is that strange dot after those link which doesn't appear in the HTML?

 

Basically I want the links to appear all the same- the background to hover on all links completely, including the top half.

 

Any ideas at all? I would greatly appreciate the help.