CSS hover with display:block acts funny in IE

[deuce868]

I'm working on a site problem. The main menu consists of a CSS rollever effect for the main menu links on the left.

For some reason the first option "Home" the rollover works across the entire TD in IE. However the remaining links only work when you hover over the text. Anyone know why this would work so? If it works on Home I don't see why it won't work on the rest of the links.

site: http://new.msufame.msu.edu

Relevant CSS:

#main_menu {

 	border: 1px solid #000000;

}

A.menu 
{
    display: block;	
    width: 140;
    color : #006600;
	font-size: 9pt;
	text-decoration: none;
	background-image: url(../images/menu_background.gif);
	background-color: #CCCCCC;
	padding-left: 12px;
	
}

A.menu:HOVER 
{
	background-image: url(../images/menu_background_over.gif);
	text-decoration: none;
	background-color: #FFFFFF;
}

Thanks for the help.

 

[lomn75]

IE's implementation of the :hover pseudoclass is bugged. There are various means of correcting the behavior, I suggest IE7 as linked via my sig.

 

[maw]

try setting the width to 140px instead of 140.