I was doing a little experimenting with Internet Explorer, Mozilla and CSS. Why is it that Internet Explorer acts funny wiith CSS?

For example:

In Mozilla, margin : 10px = margin : 10px all the way around

But

In Internet Explorer, margin : 10px = margin : 10px 20px 10px 10px;

WHYYYYYYYYYYYYYYYYYYYYY

How am I supposed to get around this ???

Look at this LINK and you will see what I mean. Both browsers have the same page open ???

Sadly, IE still can have major problems with the CSS box model. Its CSS support is buggy and not to spec.

http://archive.webstandards.org/css/winie/

It is hard to tell without seeing your code. From what i can see from your screen shots, it appears as the menu items are floated to the right - this maybe the cause of the difference.

There are various css hacks you can use (as a last resort)
http://css-discuss.incutio.com/?page=CssHacks

But does it really matter that there is a slight difference between the two browsers - who is going to use both to view your page?

Good luck.