Advanced Search

Results 1 to 3 of 3

Thread: Dropdown Menu Problem in IE

  1. #1
    Join Date
    Nov 2007
    Location
    USA
    Posts
    170
    Thanks
    8
    Thanked 22 Times in 22 Posts

    Angry Dropdown Menu Problem in IE

    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:
    Code:
    <!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>
    <!-- BEGIN MAIN -->
    <div id="main">
    	<!-- BEGIN BANNER -->
    	<div id="banner">
    		<img src="images/banner.jpg" alt="eCap Banner" title="eCap Banner" />
    	</div>
    	<!-- END BANNER -->
    	<!-- BEGIN NAVIGATION -->
    	<div id="nav">
    	<!-- FIRST ROW -->
    	<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>
    	<!-- END FIRST ROW, BEGIN SECOND ROW -->
    		<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> 
    		<!-- END SECOND ROW -->
    	</div> 
    	<!-- END NAVIGATION -->
    	
    	<!-- BEGIN CONTENT -->
    	<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>
    	<!-- END CONTENT -->
    	
    </div>
    <!-- END MAIN -->
    </body>
    </html>
    Here is the .css file:
    Code:
    #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:
    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!
    What is obvious to you might not be to another.


    My Site

  2. #2
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    I really have no idea why it's doing what it does.
    So what is it "doing"?
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  3. #3
    Join Date
    Nov 2007
    Location
    USA
    Posts
    170
    Thanks
    8
    Thanked 22 Times in 22 Posts

    Default

    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.
    What is obvious to you might not be to another.


    My Site

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •