Drop-Down Menuswon’t work in IE

@nicklessMay 12.2006

I’ve read many tutorials (Suckerfish among MANY others) and I know the javascript that is needed in order to implement drop-down menus in IE. Of course, I did everything, and it works perfectly in firefox, but it won’t work in IE.

I’m thinking that it HAS to be something to do with my CSS.

The page I’m referring to is ~~[url]~~www.gradysizemore.net/future.html[/url]

You’ll see there that the drop-downs work if you’re in Firefox, but IE users won’t see it. If you view my source code you’ll see that the javascript in there is fine, it has to be, I copied and pasted it from the tutorial.

I’m still relatively new to CSS and I’m thinking the code at the bottom of my stylesheet might have something to do with this.

If any of you are familiar with this, could you please review it and offer up suggestions? The CSS can be found below:

~~[url]~~www.gradysizemore.net/newsletter.css[/url]

And yes, I tried using the forum to find my answer before I posted this… I read many of the links sent to the similar topics, and I still couldn’t find the answer. I think this needs some disecting because I’ve tried all the walk-throughs.

to post a comment

CSS

17 Comments(s) _↴

@BonRougeMay 12.2006 — #The scripst says this...

startList = function() {
 if (document.all&amp;&amp;document.getElementById) {
 navRoot = document.getElementById("nav");
 for (i=0; i&lt;navRoot.childNodes.length; i++) {
 node = navRoot.childNodes[i];
 if (node.nodeName=="LI") {
 node.onmouseover=function() {
 this.className+=" [COLOR=Red]over[/COLOR]";
 }
 node.onmouseout=function() {
 this.className=this.className.replace(" [COLOR=Red]over"[/COLOR], "");
 }}}}}
 window.onload=startList;

while your CSS says this...

li:hover ul, li.[COLOR=Red]open[/COLOR] ul { 
 
 <i>	</i>display:block; 
 
 <i>	</i>}

Spot the difference?

@nicklessauthorMay 12.2006 — #Haha, that makes sense... I changed it and it still won't work though. I'm telling you, this thing hates me.

@BonRougeMay 12.2006 — #What happens if you remove this?

li ul[COLOR=Red].subnav[/COLOR] {
 position:absolute;
 left:-40px;
 top:30px;
 width:130px;
 display:none;
 list-style:none;
 z-index:1;
 }

@nicklessauthorMay 12.2006 — #Again, it works in Firefox but not IE.

@BonRougeMay 12.2006 — #Maybe I changed something else and didn't notice, but I don't think so. You see, it works for me... http://bonrouge.com/test/grady.htm (The images will disappear and there's no flash because I didn't bother with that - the dropdowns work though).

@nicklessauthorMay 13.2006 — #Could it be something conflicting with my flash then? I have no idea what could be the issue. The code HAS to be right...

@nicklessauthorMay 13.2006 — #Nope, it can't be the flash, I commented it out and the drop-downs still didn't work. Could it be my FTP? What in the world....

I even copied your stylesheet exactly... still won't work.

@BonRougeMay 13.2006 — #I'd say it might have something to do with your lack of a DTD, but to be honest, I think I got the menu working before I even noticed your DTD ws missing. Having said that - you should add a DTD anyway - it's basic good practice.

@nicklessauthorMay 13.2006 — #Just direct me to where and to what, and I'm on it...

I went ahead and tried referencing the one that you put in there and it didn't work... was I supposed to try a different method?

@nicklessauthorMay 14.2006 — #So have I successfully stumped Webdeveloper.com on this one? That would be nice an reasurring knowing that it's not just me.

@BonRougeMay 14.2006 — #Hi. A DTD looks like this. You put it at the (very) top of your page (and leave it there). See if it helps.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

@nicklessauthorMay 14.2006 — #Yeah I did some research on that and copied that one you gave me... all it did was space out my page... drop-downs still won't work.

@SnitchcatMay 15.2006 — #I'm glad you posted this, Nickless; I'm having the same problem with IE.

I checked my own site on three different computers running three different versions of IE (including the most updated version). I even re-wrote the CSS from scratch. The drop-menus are still not working. *sigh*

Any other ideas, guys?

Thanks,

Snitch.

@nicklessauthorMay 16.2006 — #I have tried everything, I've even copied the exact code from another website and plugged it into mine and then uploaded it... it didn't work. For some reason, I cannot find a drop-down code to work for me in IE. I'm 99.8% convinced that my code is fine, but yet it still won't work.

I wonder if this mystery will ever be solved.

@SnitchcatMay 16.2006 — #It wouldn't be IE itself being a pain, would it?

(I've not yet had time to reinstall IE, so not sure.)

@BonRougeMay 16.2006 — #I've just realised what your problem is. You have an onload event in the body tag. It's cancelling the one in the script tags. If you want to use the preload images function, try removing all the stuff from the body tag, so you have something like this... '<body>' and put this - 'preloadImages();' within the startList function, just before the five curly brackets.

@nicklessauthorMay 16.2006 — #Oh my God! YES YES YES YES YES YES YES YES YES!!!!!!!!

AHHHHHH Thank you sooooooo much! You did it! Man, you have no idea how much this means to me, you're my hero! So much stress has just been relieved.

Thank you BonRouge!

Also in #CSS _↴

Lay out design for website Black box isn't rounded in FireFox but Bullets not displaying in IE

Success!

Help @nickless spread the word by sharing this article on Twitter...

Tweet This

Drop-Down Menuswon’t work in IE

17 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Drop-Down Menuswon’t work in IE

17 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

17 Comments(s) _↴

Also in #CSS _↴