Hi! I am new to this forum and hope that someone can give me some tips/pointers as to why my CSS menu is displaying weird in FireFox. I am referring the the 2nd level menu that starts with "Registration". The menu should sit flush with the left border, but for some reason, there looks to be about a 40-50 pixel space between the left border and the menu that I can't get rid of.

I thought that by adding the float style to the CSS in the ID that is used for that section, it would work, but no luck. Am I missing something else that is needed to make this work?


The page can be viewed at: http://www.aahanet.org/aahalongbeach2010/
The CSS is at http://www.aahanet.org/aahalongbeach2010/s...YC2010style.css
The JavaScript menu is at http://www.aahanet.org/aahalongbeach2010/include/menunav2.js

The pages display as they should in IE, but something is not working right with FFox. Any help or advise is greatly appreciated

The menu looks the same in Opera and Safari as it does in FF. So I'd say the problem isn't with FF. It's with IE.

So I was wrong. The problem isn't with any brower. It's with YOU.

You have forgotten to take the different margin and padding browsers style UL and LI with into account. A list is supposed to look like a nice list without CSS too, you know. For that reason many block level elements have default styling. If for example P didn't have margins, the text would float together, there wouldn't be any visible paragraphs. But browsers, of course, do these things differently. So when you play with elements that might be given margin or padding by the browser, make sure you take control and don't leave things to the browser just because it looks good anyway, because another browser might do something you don't like.


Remove all margin/padding before your other style rules for the nav and add back what you need. Which is nothing, I think, because it looked good just with this.

Also i cant remember which browser it is but one of them doesnt remove the space on the left of the link where the bullet point used to be even if you cancel out the padding so i use



good luck

-------------------------------------------------------------

fbm247
Web Design Somerset

You can compare your code with others. There are many css-menu examples on the web. The examples below are easy and not code-complicated.

Left Menu (vertical)
http://www.cafewebmaster.com/pure-css-mous...hout-javascript

Top Menu(horizontal)
http://www.cafewebmaster.com/dropdown-roll...u-pure-css-html