Drop-down menu assistance, please.
January 28, 2007 12:53 AM Subscribe
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.
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.
Best answer: 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
posted by malevolent at 1:53 AM on January 28, 2007
Best answer: 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
posted by thanotopsis at 5:03 AM on January 28, 2007
Best answer: 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]
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]
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 secret about box at 11:13 AM on January 28, 2007
http://www.google.com/search?hl=en&q=IE+vertical+list+spacing&btnG=Search
posted by secret about box 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.
posted by kirkaracha at 1:33 PM on January 28, 2007
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
Response by poster: 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
posted by foxinthesnow at 2:32 PM on January 28, 2007
This thread is closed to new comments.
posted by AmbroseChapel at 1:21 AM on January 28, 2007