:hover width problem in IE7

Hello, this is my first post. Seems like a great place . . .

Homepage for a college contains tabs running under jquery. On hover state, IE7 displays color 20+ pixels short.

part of jQuery code for grey hover

 .ui-tabs-nav li.fronttab_grey a:hover span, .ui-tabs-nav li.fronttab_grey a:focus span {
background-position: 0 -50px; background-color:#ccc; color:#171e2c;
}

:

located in typography.css

li.fronttab_grey a {
background:none;
background-image:url(../images/global/bannermenu_bg.png);
margin: 4px 0 0; /* position: relative makes opacity fail for disabled tab in IE */
padding-left: 0;
color: #fff;
font-weight: bold;
line-height: 1.2;
white-space: nowrap; /* required in IE 6 */    
outline: 0; /* prevent dotted border in Firefox */
}

li.fronttab_grey a:hover {
background-color:#CCCCCC;
color:#17182c;
width:100%;
}

located in layout.css:

ul.mainmenu {
list-style-type:none;
padding:8px 11px 12px 11px; /*changes bottom margin in IE only for some reason*/
margin-right:0;
}

ul.mainmenu li, ul.mainmenu li.last {
display:inline;
height:50px;
padding:0;
margin:0;
font-size:1.2em;
}

ul.mainmenu li.last {
border-right:0px solid white;
padding-right:0px;
background:none;
}

a.mainmenuitem:hover, a.mainmenuitemlast:hover, a.mainmenuitemfirst:hover {
text-decoration:none;
background:#17182c;
height:50px;
margin:0;
width:100%;
}

a.mainmenuitem {
height:50px;
padding:8px 11px 10px 11px;
margin:0px;
background:none;
color:white;
text-decoration:none;
}

a.mainmenuitemlast {
height:50px;
padding:8px 25px 10px 11px;
margin:0px;
background:none;
color:white;
text-decoration:none;
}

a.mainmenuitemfirst {
height:50px;
padding:8px 11px 10px 25px;
margin:0px;
background:none;
color:white;
text-decoration:none;
}

a.mainmenu2item, a.mainmenu2itemfirst, a.mainmenu2itemlast {
height:50px;
padding:7px 11px 10px 11px;
margin-top:1px;
background:none;
color:white;
text-decoration:none;
}

a.mainmenu2item:hover, a.mainmenu2itemlast:hover, a.mainmenu2itemfirst:hover {
text-decoration:none;
background:#CCCCCC;
color:#000;
width:100%;
}

a.mainmenu2itemlast {
padding:7px 61px 10px 11px;
}

a.mainmenu2itemfirst {
padding:7px 11px 10px 11px;
}

a.mainmenu2itemlast2 {
padding:7px 61px 10px 11px;
background:#CCCCCC;
color:#000;
text-decoration:none;
}

CSS files for the homepage

Thank you so much for you help!

--Matt