CSS Weirdness - in Firefox?!?

Soldato
Joined
18 Oct 2002
Posts
14,761
Location
The land of milk & beans
Well this is a new one on me - FF misbehaving.

If you check [link #1] you'll see I've started the build, and I just need to move the #banner DIV down by adding margin-top: 6px to it.

BUT, when I do that, it also adds 6px top margin to #container - even though it's specified only on the #banner DIV - you can see that [link #2].

In IE6/7/8, Opera and Chrome all is good in the hood.

Anyone had this before?

*edit*
Links removed so they don't affect SEO :)

Cheers for the help guys
 
Last edited:
Associate
Joined
8 Aug 2008
Posts
302
Yeah I get that, dunno what causes it, usually have to end up using padding.
 
Soldato
Joined
30 Sep 2003
Posts
10,916
Location
London
Odd. It seems to be #header that's being given the margin - when you set #header to inline-block, the gap disappears. Why it's happening, I don't know. Rendering bug, I guess.

(edit) It also disappears when you take the relative positioning off the body, which is slightly more useful.

http://rafael.adm.br/css_browser_selector/

very useful for making your sites look peachy in every browser

Clever, but there's part of me that doesn't like making CSS dependent on JavaScript... what happens when the visitor has NoScript or similar?
 
Last edited:

Izi

Izi

Soldato
Joined
9 Dec 2007
Posts
2,718
normally floating objects left (even though they wont float because width doesnt allow) normally fixes this for me.
 
Top Bottom