View Full Version : Dropdowns show ABOVE page in IE6, OK FF/IE7!

02-02-2007, 03:29 AM
Hi, another clueless newbie here with a Javascript/CSS menu problem. I am a designer, not a developer. I had no idea how hard it would be to add what seemed like a basic dropdown navigation menu to a site. I managed to find a script here:


And to tweak the code to fit and match my page. It seems to work perfectly in Firefox for Mac, PC, and IE7 on the PC. Then a friend tested it in IE6 on the PC and of course it did something bizarre. The dropdown menus appear offscreen, above the page. You can see the last half of each last menu item, at the top of your window, and that's it!


Please see my current page in action here:


Help would be strongly, mightily appreciated, as I thought I was nearly done with this project and now I'm left not knowing what the heck to do. If you solve my problem successfully and soon, I'll gladly trade out an hour or so of design work if you need it. I do logos and all kinds of print work.

02-02-2007, 12:55 PM
Just having a look at this, but there are a few things you might want to consider - this looks like my early work, so I know just where you're coming from at the moment. While Dreamweaver does make life much easier if you're not technical, you can't rely on it entirely. I can recognise your thought processes, as they're exactly like mine when I was starting, and my code looked much like yours.

CSS isn't about applying styles in the same way as you would use styles in Quark or InDesign. It's a different approach which avoids using tables for layout. You separate the content from the presentation entirely. If you were to look at the HTML file alone, with no styles, then it should read like a long, single column Word file, with headings, pictures, tables etc appearing in a logical order.

You start with text and images that flow in a logical order; use HTML to give it structure using headings, lists, paragraphs, tables - for tabular data not for layout - etc (and start to address issues of accessibility through alt tags for images, abbr and acronym tags for abbreviations etc); group sections together using divs; and then use CSS to pull it into the design you want to achieve.

The other thing is that using Javascript for your navigation (and providing no alternative) means that people who don't have scripting switched on won't be able to get around your site. That might not seem important, but if you consider that your audience is educators, then not providing access for people with disabilities (who might have a physical disability and not be able to use a mouse, or might be visually impaired and browsing using a screen reader like Lynx) might prove embarrassing (or even a source of litigation for non-compliance with disability discrimination legislation) for your clients.

This looks like an 'almost finished' version, so I know it's going to feel like a bit of a kick to tell you all this now, when all you really wanted was a bit of help with a problem in your navigation, but I'm honestly being constructive in pointing you towards what is a better way of thinking about and constructing web pages.

I always recommend Sitepoint books, as I think they provide a really good introduction to design using CSS. There's Build Your Own Web Site The Right Way Using HTML & CSS (http://www.sitepoint.com/books/html1/) and HTML Utopia: Designing Without Tables Using CSS (http://www.sitepoint.com/books/css2/) which would make very good starting points.

You can also install multiple versions of IE as standalones (http://tredosoft.com/Multiple_IE), so you don't get nasty surprises like this at the last minute courtesy of Tredosoft.

02-02-2007, 01:11 PM
I've downloaded your whole site, and I can't even get the main menu to display, so I'm a bit stumped for troubleshooting purposes.

Could I suggest a more straightforward (and accessible) method is the 'Son of Suckerfish' CSS dropdown in this article (http://www.htmldog.com/articles/suckerfish/dropdowns/)

Sorry I couldn't be more help than that :(

02-02-2007, 04:52 PM
The multiple versions of IE link is especially helpful. We have three computers - two Macs and a PC, plus one of the Macs can run Windows - but none of them has IE6 on it, so that is definitely something I'll look into.

Regarding Dreamweaver development, I know that "true" designers use divs and steer away from tables but honestly, I am a terrible coder. I'm a Photoshop/Illustrator/Fireworks/InDesign visual kind of girl. Wrapping my head around an entirely new way of designing pages is not something I have the luxury of getting into right now. Maybe when work slows down! :)

I agree with you about accessibility and I didn't know that Javascript caused a problem with that. I actually had seen the Suckerfish menu referred to over and over, but I did not understand in the least how to implement it (tried, failed) and I'd also tried two other different menus with no success either positioning or customizing them. This Javascript one was the first that actually *showed up* for me on the page I had built and allowed me to change the CSS with ease.

I have resigned myself to the fact that I have to start *completely over* with this menu, which kills me 'cos it was so pretty, and I spent so much time on it. Maybe I will give Suckerfish another go today. I have to do something, this site is due ASAP!

I did find a list that discusses tons of dropdown options and that might help someone else, so here it is.


02-04-2007, 06:30 AM
Well - I've started all over using Suckerfish. This is how far I've gotten.


In IE6, it appears to be centering the dropdowns on each menu item (but is OK in Firefox/Safari/Mac... but I'll figure that out tomorrow.

02-08-2007, 12:31 PM
Been watching this over the past few days - top work Gaddygirl! You'll be in a cocktail bar discussing the merits of different DOCTYPES with your friends in no time :)

Just one thing suggests itself. In the style sheet controlling the styles using in the menus, you might want to change

#nav a {
width: 112px;
text-decoration: none;

#nav a {
width: 98px;
text-decoration: none;

In FireFox, the block containing the link is slightly wider than the enclosing ul, once you add in the margins, so the w in 'Subscribe or renew' extends beyond the white area of the dropdown. It's not so obvious in IE6/7, because the ul expands to fit the width of the link block, but it does mean that the white dropdown area overlaps the menu item to the right. Restricting the width of the link means that they fall nicely underneath your main menu items.

02-08-2007, 01:13 PM
use [url=http://validator.w3.org/check?uri=http%3A%2F%2Fsimplythebest.net%2Fscripts%2FDHTML_scripts%2Fdhtml_script_105.html]validator you know, you've got 36 errors in your html file.

02-08-2007, 08:56 PM
Man, you guys are strict! :-) Seriously, though, I am very grateful for the help. I've been working on other design projects, doing laundry, baking cupcakes - essentially doing ANYTHING I can to avoid working on this damn menu.

But I have made progress. I had already run the W3 validation and knew I was in trouble. Now I have it down to 7 errors. That seems pretty good considering what a code infant I am.


The first error it's throwing seems to have to do with my doctype and my desire to have zero margin on the top and left of the page. I'm not sure what the solution is and it doesn't seem to be breaking anything in the browsers I'm able to test (IE6/7, FF, Safari).

Since one of the menu items was so long ("Education Consumers Foundation") I got them to agree to cut it to "Foundation," which helped a bit with spacing. I did modify the nav link width as suggested. I had played with the widths for days, trying ems and pixels, and various things would either bump something to the next line OR make menu items too close. How it is now appears to be a pretty good balance.

02-09-2007, 06:34 PM
I've had a bit of a play with this - if you want to see how you might approach this as a CSS layout, have a look here (http://www.johndixon.org.uk/CodingForumStuff/gaddygirl/reworked/newpage.htm). I've done the sizing in ems, so if you make the text larger the design sort of hangs together (it's one of the things to do for accessibility).

If I were doing this for real, I'd be looking at making the header, navigation, subnavigation and footer server-side includes, which would make it faster. You'll also see that I've taken out the scripts, and linked them to external files as well - that's part of current standards practice in separating content (the XHTML), from presentation (the CSS) and behaviour (the scripting). It's more efficient, because you can reuse bits of code, and make global changes more easily.

There's a few bits a pieces left to do - equalising the columns for one, if that's what you wanted to do. Just thought I'd give you something you could take apart to see how things work.

02-09-2007, 06:42 PM
That's a definite improvement. I like the spacing on the left, with more leading (maybe it's not referred to as leading online) between menu items. I also kind of like the entire thing centered rather than flush left.

I got lucky - my client has someone who wants to take over the project from here, so I seem to be off the hook for further development. HOWEVER, now that I don't have a deadline hanging over me, I really do want to learn more about CSS so if I find myself taking on another web project (God help me!) I won't code myself into a corner again. What you have done gives me something I can look at and compare and I appreciate it!