What is actually happening is a classic case of Firefox vs. IE margins. I wouldn't say a browser is wrong or right in the way it's handling your margin... they are just handling it differently.
A quick and dirty fix around something like this is to start off your css by reseting paddings and margin. This can most easily be done with:
There will still be slight differenced in this case, but you'll level the playing field between browsers much. The article I've linked to has some helpful tips as well.
Good luck!
Paul; If you would notice I already have all the margins and paddings reset /smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" />
Mattachew; Thanks, but I'm not looking for a fix, but rather an explanation of why the difference between browsers.
Wondering if anyone can tell me which browser is correct in displaying this little test.
axxcent.com/sandbox/crown/
You will see an H2 at the right of the page... FF and Opera display the desired outcome while IE (6&7) do not.
I'm wondering, based on CSS specs which one is doing the "proper" thing. Have we got any browser behavior/specs gurus here?
Thanks
Powerbit your custom web design company