Hello
Trying to create a website that looks as good in Internet Explorer as it does in Firefox is an incredibly difficult task. However, there is at least one bug in IE that is particularly perplexing for our team. The drop-down menu displays fine in Firefox and Chrome, but looks completely whack in Explorer.
This image shows what the menu's look like while browsing in Firefox and Explorer, respectively. Please click the link to see the image.
http://i1025.photobucket.com/albums/y315/brycewwilson/firefox-explorerscreenshot.png
Please help! Has anyone else encountered this problem while trying to use a menu formatted in CSS? The menu uses unordered lists and list items, and uses CSS hover to display the sub-menu contents.
Thanks in advance!
UPDATE: For some reason, the menu worked on its own in IE, but it still doesn't work on our site. Puzzling...
Here is the code.
The html follows:
<head>
<link rel="stylesheet" type="text/css" href="old_hover_menu.css"/>
</head>
<body>
<ul id="topDropDownMenu">
<li id="aboutDropDown"><a href="#">About</a>
</li>
<li id="contactDropDown"><a href="#">Contact</a>
<ul>
<li><a href="#">Form</a></li>
<li><a href="#">Information</a></li>
</ul>
</li>
</ul>
</body>
and here is the css:
topDropDownMenu {position:relative;background: no-repeat 100% 50%;width:50em;max-width:100%;float:left;}
topDropDownMenu li ul {
width:11em !important;/* leaves room for padding */
cursor:default;
position:absolute;
height:auto;
display:none;
left:-10px;
padding:1px 10px 10px 10px;
background:url(/img/clear.gif);
} /* All LIs */
topDropDownMenu li {
position:relative;
width:8.3em;
max-width:16.5%;
cursor:pointer;
float:left;
list-style-type:none;
font-weight:bold;
border-style:solid;
border-width:1px;
border-color:#222;
text-align:center;
-moz-border-radius:8px 8px 0px 0px;
} /* sub-menu LIs */
topDropDownMenu li ul li {
width:8.3em/*FF*/;
padding:0;
border:none;
max-width:100%;
border:1px solid #333;
border-top:none;
-moz-border-radius:0px 0px 0px 0px;
} /* All anchors */
topDropDownMenu li a {
cursor:pointer !important;
color:#666;
text-decoration:none;
display:block;
float:left;
height:2em;
line-height:2em;
width:100%;
-moz-border-radius:8px 8px 0px 0px;
} /* sub-menu Anchors */
topDropDownMenu li ul li a {
width:8.3em/*FF*/;
position:relative !important;
cursor:pointer !important;
white-space:nowrap;
line-height:1.7em;
height:1.7em;
font-weight:normal;
color:#666;
background-position:0 50% !important;
-moz-border-radius:0px 0px 0px 0px;
} /hover/
topDropDownMenu li a:hover,
topDropDownMenu li a:focus,
topDropDownMenu li a:active {color:#000;background:#fff}
/* display and z-index for the sub-menus */
topDropDownMenu li:hover ul,
topDropDownMenu li.msieFix ul {display:block;z-index:10;top:2em !important;}
topDropDownMenu li#aboutDropDown {z-index:2;}
topDropDownMenu li#contactDropDown {z-index:1;}
.aboutDropDown #topDropDownMenu li#aboutDropDown ul, .contactDropDown #topDropDownMenu li#contactDropDown ul {display:block;top:-1000px}
aboutDropDown a {background-color:#b9e075;}
contactDropDown a {background-color:#f7c472;}
topDropDownMenu li.msieFix a {}
.aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:focus, .aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:active, .contactDropDown #topDropDownMenu li#contactDropDown ul li a:focus, .contactDropDown #topDropDownMenu li#contactDropDown ul li a:active, {position:absolute !important;top:1028px !important;}