problem with css nav bar in IE7

[jrthib]

the problem i'm having is in Firefox or Safari, the sub nav bar on the left of the page is spaced perfectly, which is each list item is right up against each other and the whole list is aligned perfectly to the right border of the red background on the sub nav bar. In IE7 the spacing for this sub nav bar is all messed up and looks horrible. I'm wondering what i can do to make the results more consistent between the two browsers.

View it here:
http://www.saint-bernard.com/betasite/
http://www.saint-bernard.com/betasite/css/global2.css

Thanks in advance.

[boogyman]

#subnav ul { background-color: black; ...

is why the background is all messed up. I would switch it to either "inherit" or choose a color that is similar to the red background.

#subnav ul li a { ... padding: 4px 4px 4px 6px;}

pixels will ALWAYS differ between IE and other browsers, which is why it is recommended that for layouts, EMs should be used.

[jrthib]

Hey, thanks for the reply, i'll try the EMs when i get home. The thing is with the background being black. it shouldn't be seen anyway because the list items should be fitting within that box edge to edge. the bullets should also be inside the list item boxes as well.

any suggestions?

[boogyman]

key word in that phrase is SHOULD... you have to remember that you are dealing with IE, and standards compliance is not one of its strong traits (as if it has any period... hehe)

[jrthib]

One more question. I seem to have solved my problem with IE7 except that the list items have a margin of roughly 2px between them. I have all my margins on the subnav bar set to 0 and can't figure out where this is coming from.

http://www.saint-bernard.com/betasite