CODEWITHSUNDEEP
cssfirefoxmargin
Michael Creativeworkx
Michael Creativeworkx

Reputation: 11

css: Unexpected margin / padding in Firefox 4 css

I've recently started to setup a website and ran into a problem in firefox 4. My main navigation bar has an unexpected margin from the top of the page. - Only in Firefox 4. Chrome, IE8, IE9, IE7, Safari work fine. Only FF4 seems to bug around. How can I solve this elegantly without cluttering my css with ff hacks?

Thanks for your adive:

URL for live demo: http://www.creativeworkx.at

Upvotes: 1

Views: 2323

Answers (3)

tytsim
tytsim

Reputation: 139

I've worked out a simple test for your case:

<div style="float:left;">test</div><div style="margin-top: 50px;"></div>

Note: Setting margin-bottom instead of margin-top acts similar but can be solved by adding contents into the second DIV

It shows that it's a kind of complicated float problem which cause an unexpected rendering.

This unexpected rendering even appears in browser besides Firefox, like Chrome.

However, I've recently find a quick, but not formal solution, to solve your interesting problem unpredictably.

Just add a text, no matter empty string or &nbsp; after the menu, the first DIV or before the DIVs which have margin.

You can wrap the text by an element with a property of zero height and block display.

Like:

<div style="height:0">&nbsp;</div>

The problem will look like solved by this trick. :-)

Enjoy the fun of writing CSS. :-)

Upvotes: 0

jerone
jerone

Reputation: 16871

This css is the badguy:

#main-wrap {
    margin: 2em auto auto;
}

Upvotes: 0

Cobra_Fast
Cobra_Fast

Reputation: 16061

The 2em margin from the #main-wrap div are causing it.

Adding margin-top: -2em to your #doc div fixes.

Upvotes: 1

Related Questions