Kayte.ca

For some reason, IE gacks on list items that have a background color/images which use padding to push out a box around the text. So your cool menu that is supposed to look like this:

Looks like this:

FAIL!

The solution to this issue is to specify the line-height in your li element - IE will listen to this, and with the simple addition of a line-height value, your menu will render properly. So the CSS looks like this:

First the LI item, which lives in a div with the ID "topnav". As a general rule, I always set my margin/padding to 0 in my ul declaration, here - I've set the li margin/padding to 0 also, since we want the padding on the element inside the list item:

#topnav li {
	list-style: none;
	float: left;
	line-height: 52px;
	margin: 0;
	padding: 0;
}

The padding is specified on your primary link (a) element:

#topnav a {
	padding: 20px 22px 20px 22px;
}

Now your background color/image is specified on your a:hover.

#topnav a:hover {
	background-image: url(/images/nav/active_bg.jpg); 
	background-repeat: repeat-x;
} 

That's all there is to it.