...

View Full Version : Drop down nav menu not working in ie6



snarf1974
08-25-2008, 03:01 PM
Hello,

I am struggling to get the following working.

I have a CSS drop down nav menu which does not work in ie6, even though I followed the instructions from:

http://www.htmldog.com/articles/suckerfish/dropdowns/

Here is the javascript:

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);


I've placed the javascript in the body of my index page.

Here is the xhtml (and some php for the current state effect):

<div id="navigation">
<ul id="nav">
<li<?php if ($thisPage=="Home")
echo " id=\"currentpage\""; ?>>
<a href="/index.php">Home</a></li>
<li<?php if ($thisPage=="About")
echo " id=\"currentpage\""; ?>>
<a href="/about.php">About</a></li>
<li<?php if ($thisPage=="Services")
echo " id=\"currentpage\""; ?>>
<a href="/services.php">Services</a>
<ul id="subnav">
<li id="subnav_bg"><a href="repairs.php">Repairs</a></li>
<li id="subnav_bg"><a href="upgrades.php">Upgrades</a></li>
<li id="subnav_bg"><a href="wi-fi.php">Wi-Fi Setup</a></li>
<li id="subnav_bg"><a href="protection.php">Protection</a></li>
<li id="subnav_bg"><a href="datasolutions.php">Data solutions</a></li>
<li id="subnav_bg"><a href="remotefixes.php">Remote fixes</a></li>
</ul>
</li>
<li<?php if ($thisPage=="Contact")
echo " id=\"currentpage\""; ?>>
<a href="/contact.php">Contact</a></li>
</ul>
</div>

And finally the css:

#sitenav {
background:url(images/nav_bg.gif) no-repeat scroll left top;
float: left;
width: 740px;
height: 25px;
padding: 0 0 0 0;
}


#navigation #currentpage a {
background: #fff;
color: #333;
}

#nav li:hover ul, #nav li:sfhover ul {
left: auto;
}


li {
list-style-type: none;
}

a {
text-decoration: none;
color: #000;
}

a:hover {
color: #fff;
}

a:active {
outline: none;
}

a:focus
{
-moz-outline-style: none;
}


/* Navigation Menu */

#nav {
height: 2em;
margin: 0;
padding-left: 1.5em;
font-weight: bold;
}


#nav li {
position: relative;
float: left;
width: 6em;
height: 25px;
line-height: 25px;
background-color: #717171;
}

#nav li#home {
width: 44px;
line-height: 25px;
margin: 0;
padding: 0;
}

#nav li#services {
width: 60px;
line-height: 25px;
margin: 0;
padding: 0;
}

#nav li:hover {
background-color: #6FBD44;
}

#nav li a {
display:block;
float: left;
width: 100%;
text-align: center;
}


/* 2nd tier */


#subnav li a: {
display:block;
float: left;
width: 100%;
text-align: left;
}



#nav li ul {
position: absolute;
width: 5em;
left: -999em;
}


#nav li:hover ul {
left: auto;
margin: 0;
padding: 0;
position: relative;
}


#nav li:hover ul li {
width: 110px;

height: 2em;
border: none;
border-bottom: 1px solid #ccc;
overflow: hidden;
}

#nav li:hover ul li a {
display: block;
margin: 0;
padding: 0 0 0 .3em;
height: 100%;
line-height: 2em
}

#nav li:hover ul li a:hover {
background-color: #ccc;
}

ul#subnav li#subnav_bg a {
background-color: #EFEFEF;
text-align: left;
text-indent: 8px;
}

ul#subnav li#subnav_bg a:hover {
background-color: #ccc;
}

My website (work in progress) is: www.glentechsolutions.co.uk

Any help would be most appreciated.

Many Thanks

abduraooft
08-26-2008, 11:21 AM
Have you changed your CSS to work with that javascript snippet? Try by changing it like

#nav li:hover ul, #nav li.sfhover ul {
left:auto;
margin:0pt;
padding:0pt;
position:relative;
}

snarf1974
08-26-2008, 01:14 PM
Thanks very much for your suggestion.

Sorry I plastered all the code, I'm new here, obviously won't be doing that next time.

I inserted '#nav li.sfhover ul' as you said:


#nav li:hover ul, #nav li.sfhover ul {
left:auto;
margin:0pt;
padding:0pt;
position:relative;
}

Everything is working well in ie6 now, apart from the drop down under 'Services'. When I hover over 'Services' the drop down menu does not appear. Where else should I insert '#nav li.sfhover ul' ?

Many Thanks

abduraooft
08-26-2008, 01:32 PM
Have you updated it in to the website? (I couldn't see it)

snarf1974
08-26-2008, 01:43 PM
Yes, I've updated main.css

abduraooft
08-26-2008, 01:52 PM
Fix the errors in your CSS, see http://jigsaw.w3.org/css-validator/validator?uri=http&#37;3A%2F%2Fwww.glentechsolutions.co.uk%2F&profile=css21&usermedium=all&warning=1&lang=en
BTW
#nav li:hover ul, #nav li:sfhover ul {
left: auto;
}

should be

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

snarf1974
08-26-2008, 02:44 PM
Ohhhhh, nearly there.

I've fixed all the errors, bar this one:


Property -moz-outline-style doesn't exist : none

I'm not sure if there is another way to hide the dotted border when you click on a link in firefox.

The only problem aside from that is the drop down menu in ie6 pushes the divs underneath down, and doesn't go over the div. Also the border-bottom color isn't showing.

abduraooft
08-26-2008, 02:53 PM
outline:none; ? (but this may cause some accessibility issues)

snarf1974
08-26-2008, 03:04 PM
Think I'll stick with Property -moz-outline-style.

Thanks for all your help btw.

Just one more thing, how do I stop the drop down forcing everything else down in ie6?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum