Drop-down menu assistance, please.

January 28, 2007 12:53 AM

I need some help with CSS. Can someone explain why is there a gap in my drop-down menu in Internet Explorer, but not in Firefox, and if it can be corrected?

I am a complete novice at making websites, and I am trying to teach myself how to do some things by cutting and pasting codes together. I admit that I know next to nothing about what I am doing, but I am really trying, so any help would be appreciated.

I created a page here: http://students.lisp.wayne.edu/~av0762/dropdown_problems.html and when displayed in Firefox, the drop-down menu on the left is lined up perfectly when hovered over. But, in Internet Explorer, there is a big gap between the main menu and the sub menu. All attempts I have made to resize the width result in overlapping menu boxes in Firefox.

If anyone knows a solution to this problem, please share it with me. I apologize about the craziness of the code on that page; it is a result of a lot of practice and trying to see what code does what and then being to afraid to clean it up.

Anyway, thanks for the help.

posted by foxinthesnow to computers & internet (7 comments total)

Internet Explorer doesn't do the CSS "box" properly. This is probably the number one CSS problem of all time. Google for "box model hack" and pick one of the many solutions.
posted by AmbroseChapel at 1:21 AM on January 28, 2007

Your incomplete DOCTYPE is making IE use 'quirks mode'. Switch to one that'll put it in 'standards mode', make sure the markup validates, and work from there (it'll probably still misbehave, but at least you won't be wasting your time trying to work around even bigger problems).
posted by malevolent at 1:53 AM on January 28, 2007

Once in standards mode, most of your differences between firefox and IE just sputter away. You'll have to teach your mind to "think" in standards mode, but it should be doing that from the start anyway.
posted by thanotopsis at 5:03 AM on January 28, 2007

As has been said above, the first step is to use a strict doctype, which will fix most CSS issues across standards compliant browsers.

The next step then, is to try and avoid situations that trigger IE's box model issues. For example, use margins instead of padding on containers if you can. Also try to avoid CSS hacks if possible, as these are really only a band-aid solution and will cause you more trouble down the track (like when IE 7 becomes widely adopted).

A good reference point for IE's CSS rendering issues, with some workarounds, is Position is Everything.
posted by davem at 5:50 AM on January 28, 2007 [1 favorite has favorites]

I don't have IE/Win near me, but is this what you're dealing with?

http://www.google.com/search?hl=en&q=IE+vertical+list+spacing&btnG=Search
posted by Mikey-San at 11:13 AM on January 28, 2007

There are validators for CSS and HTML. You have errors in your HTML and CSS.

Even if you fix the errors, Internet Explorer sometimes doesn't like when list items are on separate lines. Browsers are supposed to ignore whitespace in markup, but IE sometimes forgets.

• Closing the gap between list items in IE
• Whitespace between list items in Windows/Internet Explorer 5
• CSS Bugs: Fix for IE / Win gap between list items
• Internet Explorer 7 and phantom spaces when using lists

posted by kirkaracha at 1:33 PM on January 28, 2007

Thanks to everyone for the help. I have decided that the problem has something to do with my list being inside of a table. I changed the DOCTYPE, and problem persisted. But, when re-created the page without tables, the list displays perfectly in IE. I did not make any changes other than remove it from the table. Now, unfortunately, the rest of page is all over the place, but I think I will teach myself how to fix it. I know I can do it! Again, thank you all for the advice.
posted by foxinthesnow at 2:32 PM on January 28, 2007