I am trying to determine why my Suckerfish dropdown menu is not showing up in IE 6.0 or 5.5. (It displays perfectly in IE 7.0, Mozilla, Opera, and Safari.) From what I've gathered, it's supposed to work in IE 6.0 and 5.5. Thus, my confusion. Any assistance would be greatly appreciated.

The site can be seen here:

http://jennmurray.com/WV_Life/index.html

And my CSS for the menu is as follows:

ul {
margin: -5px 0 0 0;
padding: 0;
list-style: none;
position: relative; z-index: 1;
}

li {
float: left;
position: relative;
width: 92px;
border-bottom: 1px solid #91125f;
}

li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
text-align: left;
}

li > ul {
top: auto;
left: auto;
}

ul li a {
display: block;
text-decoration: none;
color: #fff;
padding: 4px;
border: 1px solid #91125f;
border-bottom: 0;
font-size: 12px;
font-family: Arial, sans serif;
background-image: #91125f url(../images/nav.gif) repeat;
}

li:hover ul, li.over ul {
display: block;
margin-top: 0;
margin-left: -48px;
background: #91125f;
}

#nav a:hover {
color: #ffdab9; background: #91125f;
}

.center {
text-align: center;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li {float: left; height: 1%;}
* html ul li a {height: 1%;}
/* End */

IE 6 and below cannot :hover on anything except links. In order to get suckerfish to work, you need some scripting. Google for "whatever hover", you only need to use the small .htc file and add 1 line to the CSS to make IE work.

I attached the .htc file to the CSS file, but the result hasn't changed. The menu doesn't show up at all. It's like I never gave the site one.

where did you put the .htc file ? I've found that I have to have it in the root directory of the site in order for it to work properly.

Also, IE 6 and below won't work with descendent selectors, you'll have to change the li > ul.

I have the .htc file in the root folder. And the following is my CSS code:

body { behavior: url(csshover.htc); }

I also changed the li > ul. I gave the ul a class name in the XHTML file and changed the CSS coding to:

li ul.fix {
top: auto;
left: auto;
}

Yet the menu still isn't showing up. Am I missing a blatant error here? Or can something else be causing a problem?

Jenn I use suckerfish (or son of suckerfish) on my own site. To get it to work in IE6 and 5.5 I had to first add some javascript

var sfHover = function(){
    var sfEls = document.getElementById("top-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);

The sfHover class is meant to do what :hover does in FF and IE7.

Then in the css anywhere I have something calling :hover I also add .sfHover. For example I have a style set for:

#top-nav li:hover ul, {left: auto ; width:14em; text-align:left}

I added one for #top-nav li.sfhover ul and end up with:

#top-nav li:hover ul, #top-nav li.sfhover ul {left: auto; width:14em; text-align:left}

Anywhere else I have a style set with :hover in it I add the corresponding .sfHover (and link to the javascript above) and the drop down works fine.

I hope that helps

The htc file should work too, since I just put the son of suckerfish menu on a new site I'm working on and used the HTC file instead of adding additional javascript.

I tried the javascript, but to no avail. All I keep getting is this:

Could it be that the "display:none" is not allowing any of these methods to work? Is there a workaround for it?

Ok, here's the code I used for my very simple dropdown (only 1 sub-item)
Note the left: -999em on the submenu instead of display:none, this compensates for the display:none accessibility issue.

CSS

#nav a{
display: block;
}

#nav li{
float: left;
margin: 0px 2px;
width: 8.5em;
position: relative;

}

#nav li a{
color: #fff;
padding: 0px 0;
display: block;
padding: 4px;
}

#nav a:link{
padding: 3px 2px;

}

#nav a:hover{
color: #0038ac;
background: #fff;
}

#nav li ul.submenu{
list-style: none;
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul.submenu{
left: auto; /* brings back the sub-menu */
margin-left: -4px;
}

#nav li:hover ul.submenu li{
display: block;
}

/* this is actually in my iefixes.css file */
body {
behavior: url(csshover.htc);
}

HTML:

<ul id="nav" >
<li><a href="aboutus.htm">About Us</a>
<ul class="submenu"><li><a href="publications.htm">Publications</a></li>
</ul>
</li>
<li><a href="appointments.htm">Appointments</a></li>
</ul>

Originally Posted by LadynRed

Ok, here's the code I used for my very simple dropdown (only 1 sub-item)
Note the left: -999em on the submenu instead of display:none, this compensates for the display:none accessibility issue.

I actually checked out the Sons of Suckerfish menu today and tried that trick in addition to the .htc/javascript. But nothing changed.

I'm at the point where (in a separate sheet for 6) I'm rebuilding the menu from ground zero. Because obviously there's something that I'm missing. ... I got the menu to at least appear, but it would help if I had IE6 so I could check the actual dropdowns.

*bangs head against desk*

Aha! I found a stand alone download for IE 6 and 5.5! At least now I can fully test what I'm doing!

I have IE6, if you'll post the code or PM me with the files, I can test it for you.

Yea!!! I got it to work in IE 6!!! Don't ask me how, but I did.

The only other thing I need to fix is the padding around the search box. (See above picture.) Even in IE 7, it gives extra padding on the bottom (despite the fact I have it set to 0). How can I correct it?

could I see the css as you have it now please?

Originally Posted by wayfarer07

could I see the css as you have it now please?

For the dropdown menu or the search box?

the search box

Originally Posted by wayfarer07

the search box

This is what I have for it:

#search {
width: 160px;
padding: 5px 2px 5px 3px;
background-color: #ececec;
border: 2px solid #ccc;
}

Originally Posted by empressreborn

Yea!!! I got it to work in IE 6!!! Don't ask me how, but I did.

Just in case anyone runs into the same issue, here was the culprit (as I went back through the code to determine exactly what made it work):

I found that simply adding a height attribute was the key. Afterwards, naturally, I came across this:

http://www.communitymx.com/content/a...ge=2&cid=c37E0

It says that

A very large percentage of IE/Win bugs are triggered by the lack of any stated dimensions on elements that contain nested floats.

This seemed to be one such bug because after giving it a height, IE 6 has no problems with it at all.

yes, a height of 1% is often used.