Hi, I am running into odd issues with Z-index and hover states in IE7 and IE6 respectively.
http://career.chicagogsb.edu/alumniprofiles/ In this page, the "Choose your area of interest" CSS dropdown was behind the bottom left content area. So, I gave the top left area a z- index of 100, and the menu one of 101 to be safe - then I gave the bottom left area a z-index of 1. This resulted in the menu being visible, but the menu items under the boundary of the top left div are not "hoverable". This was the IE7 issue. In IE6, the menu items ARE "hoverable", but the list item's hover state is missing styles. Anyone have any thoughts? Here is some of the CSS: #menu { position:relative; width:330px; height:; z-index:100;} #bottomLeft img.profile { display:inline; padding:0px; margin:0px 20px 0px 0px; border: #000000 solid 8px; } #topLeft.homepage { position:relative; top:0px; float:left; background-color:#17181d; color:#FFFFFF; padding:20px; width:340px; height:258px; z-index:99; } #topRight.homepage { position:relative; float:right; } #bottomLeft.homepage { position:relative; float:left; color:#FFFFFF; background-color:#3b3c3e; width:525px; height:100%; padding: 20px; z-index:1; } #bottomRight.homepage { position:relative; float:right; border-top:#872434 solid 10px; background-color:#f8f8f8; background-image:url(/alumniprofiles/images/accessbg.jpg); background-position:left; background-repeat: repeat-y; width:360px; height:100%; padding-right:50px; margin-bottom:-30px; } ul { margin: 0; padding: 0; list-style: none; width: 320px; /* Width of Menu Items */ } ul li { position: relative; } ul li ul { position: absolute; left: 0px; /* Set 1px less than menu width */ top: 48px; display: none; text-align:left; color:#000000; border:#000000 solid 5px; } ul li ul li { color:#ffffff; border:#000000 solid 2px; background: #606060; /* IE6 Bug */ } /* Styles for Menu Items */ ul li a, ul li a:visited, ul li a:active { display: block; text-decoration: none; padding: 0px; border:none; border-bottom: 0; } ul li ul li a:link, ul li ul li a:visited, ul li ul li a:active { color:#ffffff; font-weight:bold; text-decoration:none; padding:5px; *width: 330px; } ul li ul li a:hover { color:#606060; } ul li ul li:hover { color:#606060; text-decoration:none; border:#000000 solid 2px; background: #ffffff; /* IE6 Bug */ } /* Holly Hack. IE Requirement \*/ * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } /* End */ li:hover ul, li.over ul { display: block; } /* The magic */ --~--~---------~--~----~------------~-------~--~----~ -- You received this because you are subscribed to the "Design the Web with CSS" at Google groups. To post: [email protected] To unsubscribe: [email protected] -~----------~----~----~----~------~----~------~--~---
