Browser Behavior

Joined: 11/28/2008

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

Joined: 11/28/2008
Considering Firefox, Opera

Considering Firefox, Opera and Safari showed the same thing, I'd say IE is wrong. My recommendation is use an IE stylesheet via IE conditionals.

Who can bring a charge to God's elect? It is God who justifies!

Joined: 11/28/2008
What is actually happening is

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:

CODE
* {
   margin:0;
   padding:0;
}

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!

Joined: 11/28/2008
Paul; If you would notice I

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.

Joined: 11/28/2008
OK... it has "something" to

OK... it has "something" to do with the width of the UL... if I reduce the width of ul#nav to say 720px the browsers all display pretty much the same.

Joined: 11/28/2008
Oops! So you did! I'm sorry

Oops! So you did! I'm sorry about that. I guess I am just so used to seeing IE FF margins as a culprit to so many issue I just assumed that was the case here as well!