Menu Display Problem in IE6+

obolus · 12-27-2007, 02:10 AM

I've implemented the AnyLink menu that's on DynamicDrive, but have made some minor changes to fit the design. Everything looks solid in FF, Opera and Safari. However, the devil (IE) has a problem displaying the menu at the top.

When I hover over a menu button, a dropdown selection menu appears. It shows up in IE properly except for the fact that it's behind the content divs! I assumed I could fix this by adding some z-index values to the coding for the content and menu divs, but it did not help and I continue to have the display issue in IE.

I would appreciate any help/suggestions on this. I'm just at a dead-end with it up to this point.

See the site live: The Winter Series - News

CSS for the menu area. Excuse the sloppiness, I'll clean it up later:

Code:

#ja-mainnav { position: relative; background-image: url(xx/xx/xx.jpg); height: 184px; }
#ja-mainnav div {
	z-index: 3000;
	width: 110px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #003366;
	text-indent: 2px;
	text-align: left;
	padding: 4px;
	background-color: #C8D7D3;
	border-left: 1px solid #333333;
	border-top: 1px solid #333333;
	border-right: 1px solid #333333;
	border-bottom: 1px solid #333333;
	visibility: hidden;
	display: table;
	 }
#ja-mainnav div a {
	border: 0px;
	display: block;
	text-decoration: none;
	color: #003366;
}
#ja-mainnav div a:hover {
	background-color: #003366;
	color: #ffffff;
	text-indent: 2px;
}

#anylinkmenu1 { position: absolute; left: 426px; top: 180px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; line-height: 16px; z-index: 100; width: 40px; border: 1px outset #000000; background-color: #CCCCCC; color: #000000; }
#anylinkmenu2 { position: absolute; left: 490px; top: 180px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; line-height: 16px; z-index: 100; width: 40px; border: 1px outset #000000; background-color: #CCCCCC; color: #000000; }
#anylinkmenu3 { position: absolute; left: 550px; top: 180px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; line-height: 16px; z-index: 100; width: 40px; border: 1px outset #000000; background-color: #CCCCCC; color: #000000; }
#anylinkmenu4 { position: absolute; left: 625px; top: 180px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; line-height: 16px; z-index: 100; width: 40px; border: 1px outset #000000; background-color: #CCCCCC; color: #000000; }
#anylinkmenu5 { position: absolute; left: 695px; top: 180px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; line-height: 16px; z-index: 100; width: 40px; border: 1px outset #000000; background-color: #CCCCCC; color: #000000; }

#ja-mainnav a.anylinkmenu1 { position: absolute; left: 416px; top: 148px; width: 55px; height: 32px; display: block; padding: 4px 0; text-decoration: none; font-weight: bold; text-indent: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; text-align: left; }
#ja-mainnav a.anylinkmenu2 { position: absolute; left: 481px; top: 148px; width: 50px; height: 32px; display: block; padding: 4px 0; text-decoration: none; font-weight: bold; text-indent: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; text-align: left; }
#ja-mainnav a.anylinkmenu3 { position: absolute; left: 541px; top: 148px; width: 64px; height: 32px; display: block; padding: 4px 0; text-decoration: none; font-weight: bold; text-indent: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; text-align: left; }
#ja-mainnav a.anylinkmenu4 { position: absolute; left: 615px; top: 148px; width: 65px; height: 32px; display: block; padding: 4px 0; text-decoration: none; font-weight: bold; text-indent: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; text-align: left; }
#ja-mainnav a.anylinkmenu5 { position: absolute; left: 690px; top: 148px; width: 75px; height: 32px; display: block; padding: 4px 0; text-decoration: none; font-weight: bold; text-indent: 5px; font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #000000; text-align: left; }