My navigation is messed up in Firefox

http://www.webpropertiesinc.com

Everytime i view my site in firefox, it looks like a pwnasaurus walked all over my second level drop downs! I know it has to do something with the borders/padding, but if I change the width low enough to make it all even out, then it looks all horrible in IE! Can anyone help me?! To see what i mean, go to the link above and highlight "More Information" or "Quick Forms". They are supposed to be the same width as the parent level item, but it shoots way to the right in Firefox. I hate getting wtf pwnd by IE like this...need some help....

-Ben

Give the following a try and see how it works out for you:

add the following to your CSS:

html>body #nav li li {
width: 120px;
}

then add:

background: #c0d4e8;

to your #nav li li a { ... } declaration.

Let me know if that works out for you.

Perfect! Works great! Can you explain some of those css comands? I think I get the syntax of html>body #nav li li...it shows a browser where to go, right? But what does the ">" mean? Is it a Firefox specific command? Finally, is this just CSS3?

Just trying to understand how it works so I can figure this stuff out for myself if anything else goes wrong.

Thanks again!

-Ben

html>body means to select direct children of the type "body" of the "html" object.

There's only one body, and it's always a direct child of HTML, but Internet Explorer doesn't understand it, so doing this is redundant in other browsers but it hides the rule from IE.

html>body h1 {
color: red; /* h1 tags will be red in (most) browsers except IE */
}