Dropdown Menu Problem in IE [Archive]

Moshambi

11-29-2008, 04:25 PM

Ok so I have a perfectly fine drop down menu working in Firefox and I need to get it to work in IE. I really have no idea why it's doing what it does.

Here's my .htm file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8' />

<title>eCap - Home</title>

<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="ie_menu.css" />

<script type="text/javascript" src="menu.js"></script>

</head>

<body>

<div id="main">

<div id="banner">
<img src="images/banner.jpg" alt="eCap Banner" title="eCap Banner" />
</div>


<div id="nav">

<ul>
<li><span><a href="#"> Home </a></span></li>

<li onmouseover="javascript: showSub('sub1');" onmouseout="javascript: hideSub('sub1');"><span><a href="#"> Application Certification Processing </a></span>
<ul id="sub1" style="display: none; position: relative; top: -4px; left: -6px; padding: 0px; margin: 0px;" onmouseover="javascript: showSub('sub1');" onmouseout="javascript: hideSub('sub1');" >
<li><a href="#"> Maintain Case/Applicants </a></li>
<li><a href="maintainprogramcertification.htm"> Maintain Program Certification </a></li>
<li><a href="#"> Maintain Household Members </a></li>
<li><a href="#"> List/Approve Case/ Applicants (supervisor) </a></li>

</ul>
</li>

<li onmouseover="javascript: showSub('sub2');" onmouseout="javascript: hideSub('sub2');"><span><a href="#"> Payment Processing </a></span>
<ul id="sub2" style="display: none; position: relative; top: -4px; left: -6px; padding: 5px; margin: 0px;" onmouseover="javascript: showSub('sub2');" onmouseout="javascript: hideSub('sub2');" >
<li><a href="#"> Process Electric Bill </a></li>
<li><a href="#"> Process Gas Bill </a></li>
<li><a href="#"> List/Approve Bills </a></li>
</ul>
</li>

<li onmouseover="javascript: showSub('sub3');" onmouseout="javascript: hideSub('sub3');"><span><a href="#"> Operations </a></span>
<ul id="sub3" style="display: none; position: relative; top: -4px; left: -6px; padding: 5px; margin: 0px;" onmouseover="javascript: showSub('sub3');" onmouseout="javascript: hideSub('sub3');" >
<li><a href="#"> Expire Bill </a></li>
<li><a href="#"> Expire Case </a></li>
<li><a href="#"> Export to Vitelco </a></li>
<li><a href="#"> Export to Great Plains for Electricity Check </a></li>
<li><a href="#"> Export to Great Plains for Electricity Vendor </a></li>
<li><a href="#"> Export to Great Plains for Gas Check </a></li>
<li><a href="#"> Export to Great Plains for Gas Vendors </a></li>
</ul>
</li>
</ul>

<div id="nav2">
<ul>
<li onmouseover="javascript: showSub('sub4');" onmouseout="javascript: hideSub('sub4');"><span><a href="#"> Learning </a></span>
<ul id="sub4" style="display: none; position: relative; top: -4px; left: -6px; padding: 5px; margin: 0px;" onmouseover="javascript: showSub('sub4');" onmouseout="javascript: hideSub('sub4');" >
<li><a href="#"> Program Manual </a></li>
<li><a href="#"> FAQs </a></li>
<li><a href="#"> Website Links </a></li>
<li><a href="#"> Employee Training </a></li>
<li><a href="#"> Schedules </a></li>

</ul>
</li>

<li onmouseover="javascript: showSub('sub5');" onmouseout="javascript: hideSub('sub5');"><span><a href="#"> Administration </a></span>
<ul id="sub5" style="display: none; position: relative; top: -4px; left: -6px; padding: 5px; margin: 0px;" onmouseover="javascript: showSub('sub5');" onmouseout="javascript: hideSub('sub5');" >
<li><a href="#"> Manage Users </a></li>
<li><a href="#"> Manage Vendors </a></li>
<li><a href="#"> Manage Eligibility Tables </a></li>
<li><a href="#"> Manage Lookup Lists </a></li>
</ul>
</li>

<li><span><a href="#"> Logout </a></span></li>
</ul>
</div>

</div>



<div id="content">
<p>
<span class="bold">You are logged in as:</span> NELSON, JACK <br />
<span class="bold">Full Name:</span> Jack Nelson <br />
<span class="bold">Location:</span> St. Croix <br />
<span class="bold">User Role:</span> Administrator <br />
</p>
</div>


</div>

</body>
</html>

Here is the .css file:

#nav ul
{
list-style-type: none;
text-align: center;
}

#nav ul li
{
display: block;
width: 175px;
height: 40px;
border: 1px solid black;
float: left;
}

#nav span
{
display: block;
width: 175px;
height: 40px;
}

#nav a
{
display: block;
width: 175px;
height: 40px;
background-color: skyblue;
text-decoration: none;
color: white;
font-weight: bold;
}

#sub1 a, #sub2 a, #sub3 a, #sub4 a, #sub5 a
{
display: block;
width: 175px;
height: 40px;
background-color: darkblue;
text-decoration: none;
color: white;
font-weight: bold;
}

#nav a:hover
{
color: black;
}

#sub1 a:hover, #sub2 a:hover, #sub3 a:hover, #sub4 a:hover, #sub5 a:hover
{
color: yellow;
}

#nav
{
position: relative;
left: 0px;
top: 0px;
/*z-index: 50;*/
margin: 0px;
padding: 0px;
}

#nav2
{
margin-left: 100px;
z-index: 0;
}

And finally the JavaScript code:

function showSub(elem)
{
var x = document.getElementById(elem);

x.style.display = "block";
}

function hideSub(elem)
{
var x = document.getElementById(elem);

x.style.display = "none";

}

I know it mught be a lot to look through but any help would be GREATLY APPRECIATED!!

Thanks in advance!

BLiZZaRD

11-29-2008, 06:57 PM

I really have no idea why it's doing what it does.

So what is it "doing"?

Moshambi

11-29-2008, 08:27 PM

lol oops sorry I guess I forgot to say that.

It's got a top and bottom to it so it looks like this:

----------------------
--------------

The top line being a row of links for the menu and same with the second.
Now when when I hover over the link on the top row it makes a huge space
the size of the actual dropdown list. It's like the z-index isn't working or something. Or it's kinda like the difference between display and visibility, it actually pushes all the items on the bottom row to the right or pushes them down the page the length of the newly visible element. I guess that would be the best way to explain it? If it doesn't make sense let me know and I'll take a
screenshot of it.