CSS Weirdness - in Firefox?!?

GravyMonster · 23 Sep 2009 at 11:46

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

PMWD · 23 Sep 2009 at 11:48

Yeah I get that, dunno what causes it, usually have to end up using padding.

GravyMonster · 23 Sep 2009 at 11:52

I've actually fixed it by specifying the height of #header, but it'd still be nice to know if anyone has a solution to the original problem.

PMWD · 23 Sep 2009 at 16:38

madcat86 · 23 Sep 2009 at 19:11

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

very useful for making your sites look peachy in every browser

Mattus · 24 Sep 2009 at 03:53

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.

madcat86 said:
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?

Izi · 24 Sep 2009 at 06:50

normally floating objects left (even though they wont float because width doesnt allow) normally fixes this for me.