SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
Thread: Pop Out Menu Doesnt work in IE 6
-
Sep 25, 2007, 13:51 #1
- Join Date
- Jul 2006
- Posts
- 10
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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; }
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° 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>
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.
-
Sep 26, 2007, 16:44 #2
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 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;}
Try removing the first line and making it
Code:#nav ul li:hover ul { display: block }
-
Sep 27, 2007, 06:05 #3
- 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.
-
Sep 27, 2007, 16:07 #4
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 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.
-
Sep 28, 2007, 12:59 #5
- 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.
-
Oct 1, 2007, 05:55 #6
- 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