homepage Welcome to WebmasterWorld Guest from 54.161.147.106
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
suckerfish dropdown
does not display in IE6/7
KatrinR




msg:3440229
 8:06 pm on Sep 3, 2007 (gmt 0)

hello all - I was searching on this forum and worked through different versions of the suckerfish dropdown menu, yet with all of them I run into a different issue that made it not working. Therefore, I decided on the version of Son of Suckerfish dropdowns (http://www.htmldog.com/articles/suckerfish/dropdowns/)and hope to get some help here to what is missing for IE6/7

Here are my styles

#tnav {
width:685px;
margin-left:210px;
list-style: none;
float:right;
position:relative;
}

#tnav, #tnav ul {
padding: 0;
margin: 0;
list-style: none;
}

#tnav a {
display: block;

}

#tnav li {
float: right;
margin: 0;
padding: 0;
position: relative;
}
#tnav li a:link, #tnav li a:hover, #tnav li a:active, #tnav li a:visited {
display: block;
padding: 3px;
text-decoration: none;

}
#tnav li ul {
position: absolute;
width: 95px;
left: -999em;
}

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

}

I tried to insert following for IE

<!--[if ie]>
/* for ie/Win Only */
<style type="text/css" media="screen">
#tnav li ul {
top: 10px;
left: 0;
}
</style>
<![endif]-->

yet it didn't work (only misaligns some of my design!)

Any help is so appreciated

Thank you,
Katrin

 

mattur




msg:3440232
 8:16 pm on Sep 3, 2007 (gmt 0)

Hi Katrin,

Have you got the relevant javascript included in your page?

IE only supports :hover on links, it doesn't support :hover on li's. So to work in IE, Son of Suckerfish needs a bit of javascript to display. HTH.

KatrinR




msg:3440237
 8:28 pm on Sep 3, 2007 (gmt 0)

yes, I included (from the 'Son of suckerfish')

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);

Katrin

mattur




msg:3440241
 8:43 pm on Sep 3, 2007 (gmt 0)

Hi Katrin,

You need to change the js to use your div's id, i.e. change "nav" to "tnav":

var sfEls = document.getElementById("tnav").getElementsByTagName("LI");
...etc

KatrinR




msg:3440244
 8:57 pm on Sep 3, 2007 (gmt 0)

:-) yes, this makes sense... and it works now. No tutorial said that, and I don't know JavaScript - yet.

(That's why I don't like copying things without understanding them.)

THANK YOU SO MUCH!

Katrin :-)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved