SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Pop Out Menu Doesnt work in IE 6

    I can't even count the number of websites with pop out sub menus and i have never run into this problem.

    i have a list type navigation that has a sub menu in it. i have it styled in CSS and am using a :hover on my list item to display my sub menu. i also have a javascript running for IE to add a class name of hover to the list Item when moused over.

    the sub menu is absolutely positioned in the relatively positioned list item. so when you mouse over the list item it makes the UL display:block;

    This is all simple stuff but for some reason it will not wok in IE 6 and under, and it has me stumped. Can someone please take a look, maybe i missed something.

    the website is:
    http://www.avallo.com/test/polycast
    and the css is:
    http://www.avallo.com/test/polycast/css/default.css

    Please Help!

    Here is the navigation css for a quick referance.
    Code:
    /* =nav
    -----------------------------------------------------------------------------*/
    
    #nav{
    	float:left;
    	width:175px;
    	margin:25px 0 20px 25px;
    	padding:0 0 200px 0;
    	background:url(../images/logoMark.gif) center bottom no-repeat;
    	display:inline; /* <-- IE 6 Double Margin Bug Fix */
    	position:relative;
    }
    #nav ul{
    	list-style:none; 
    	border:1px solid #75a1ce;
    	border-width:1px 0 0 0;
    	background:url(../images/logoMark.gif) center bottom no-repeat;
    	margin:0;
    	padding:0;
    	position:relative;
    }
    #nav ul li{
    	position:relative;
    	display:block;
    	float:left;
    	width:175px;
    }
    #nav ul li a{
    	display:block;
    	padding:0;
    	text-align:left;
    	width:174px;
    	float:left;
    	text-indent:20px;
    	color:#fff;
    	font-size:15px;
    	letter-spacing:1px;
    	background:#1861ae;
    	border:1px solid #75a1ce;
    	border-width:0 0 1px 0;
    	line-height:25px;
    	text-decoration:none;
    }
    #nav ul li a:hover{
    	color:#333;
    	background:#75a1ce;
    }
    #nav ul li ul{
    	display:none;
    	position:absolute;
    	top:-1px;
    	left:169px;
    	padding:0 0 0 5px;
    	margin:0 0 0 0 ;
    	border-width:1px 1px 0 0;
    	list-style:none;
    	z-index:5000; 
    }
    #nav ul li.hover ul,
    #nav ul li:hover ul
    {display:block;}
    
    
    
    #nav ul li ul li a{
    	padding:3px 10px;
    	width:150px;
    	text-indent:0px;
    	border-width:0 0 1px 1px;
    	line-height:18px;
    }
    The HTML:
    HTML Code:
    	<div id="nav">
    		<ul class="clearfix">
    			<li><a href="index.php">Home</a></li>
    			<li><a href="production.php">Production</a>
    				<ul class="clearfix">
    					<li><a href="production.php">Equipment List</a></li>
    					<li><a href="production2.php">90&deg; Presses</a></li>
    					<li><a href="production3.php">Capabilities</a></li>
    				</ul>
    			</li>
    			<li><a href="rim.php">RIM Molding</a></li>
    			<li><a href="#">Materials</a></li>
    			<li><a href="served.php">Industries Served</a></li>
    			<li><a href="about.php">About Us</a></li>
    			<li><a href="iso.php">ISO Certification</a></li>
    			<li><a href="contact.php">Contact Us</a></li>
    		</ul>
    	</div>
    The Javascript:

    Code:
    /* =IE Menu dropdown support
    -----------------------------------------------------------------------------*/
    function listHover() {
    	if (document.all && document.getElementsByTagName) {
    		li = document.getElementsByTagName("li");
    		var x = "hover"
    		for (i in li) {
    			node = li[i];
    			if (node.nodeName=="LI") {
    				node.onmouseover=function(){this.className=((!empty(this.className)) ? this.className+" "+x : x);}
    				node.onmouseout=function(){this.className=this.className.replace(x, "");}
    			}
    		}
    	}
    }
    
    
    /* =Helper Functions
    -----------------------------------------------------------------------------*/
    function empty(x){	return ((x == '' || x == null) ? true : false);}
    Last edited by westoncansingpun; Sep 26, 2007 at 05:53.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hmm, i'm drawing at straws here:

    Code:
    #nav ul li.hover ul,
    #nav ul li:hover ul
    {display:block;}
    I think you have some funky characters in the above bit of code, the two lines look identical but testing in Firefox the first one line alone doesn't work, the second line alone does?

    Try removing the first line and making it
    Code:
    #nav ul li:hover ul { display: block }

  3. #3
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The top line specifies a class name for the LI element. Since IE6 and under don't support pseudo classes on elements, (other than anchor tags) you have to add a class name to elements that you want to behave differently. The JavaScript added a class name of "hover" to the element you are moused over. The JavaScript doesn't work in FireFox because of the line:
    " if(!document.all) return false; "
    So taking out that line of CSS will not change anything in FireFox, and then for sure it will not work in IE.

    I have tested the script it works fine, it is adding a class name in IE of "hover" to the LI element on "mouseover" and removing them "onmouseout".

    Thank you for your post though.

    Update:
    When removing position:absolute; like changing it to position:relative; it works in both browsers... but it has to be positioned absolutely in order for the menu to behave properly....

    Has anyone heard of something like that before?

    Thanks in advance for any help.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Gee, I completely missed that one was a '.' and one was a ':'. the eyesight's going.

    Try setting position relative on the anchors themselves and not the li elements.

  5. #5
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The UL element is inside of the LI Elements and not the A tags. putting the UL inside of an anchor tag is semantically incorrect because it is an inline element. the LI has to be the one positioned relative so the UL has a reference point to position from.

  6. #6
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok if anyone ever runs into this problem i just figured it out.

    it was the width on the "#nav ul li a" i dont know why but this works:
    Code:
    #nav ul li a{
    	display:block;
    	padding:0;
    	text-align:left;
    /*	width:174px;
    	float:left;*/
    	text-indent:20px;
    	color:#fff;
    	font-size:15px;
    	letter-spacing:1px;
    	background:#1861ae;
    	border:1px solid #75a1ce;
    	border-width:0 0 1px 0;
    	line-height:25px;
    	text-decoration:none;
    }
    Last edited by westoncansingpun; Oct 1, 2007 at 07:07.


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
  •