Navigation menu spacing in FF and IE8 different

HTML & CSS
1

OK, I have my test site up and mostly done - http://www.saccc567.com/Test - it does need some tweaking but want to get the major things in place.

However, the left navigation menu spacing changes between FireFox and IE8. The padding(?) seems to get bigger in IE8 and I like the spacing on FF.

So… what is going on? I mean besides IE8 has its own issues and/or way of doing things.

Any ideas/help would be greatly appreciated.

Thanks
F

2

Hi,

Lists may have default padding and margins depending on the browser so you need to control all the padding and margins on the ul which you are nt doing.


.mainNav {
 [B] margin:0 0 0 15px;padding:0
}[/B]
[B].mainNav li,.mainNav li a{zoom:1.0}/* ie6/7 hack  - invalid css but will do no harm*/[/B]

That should make it consistent in both FF and IE (or as close as can be expected).

You also seem to have two stylesheets almost the same in place which makes it impossible to debug easily.

Amalgamate the stylesheets and get rid of duplicated rules. You must keep the code clean and in good order or debugging is a nightmare.:slight_smile: