656894 - Unexpected margin / padding in Firefox 4 css

Status: RESOLVED DUPLICATE of bug 451791

(Firefox :: General, defect)

Description

[mailkistl]

User-Agent:       Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.68 Safari/534.24
Build Identifier:               Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0.1) Gecko/20100101 Firefox/4.0.1

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. 

Reproducible: Always


Actual Results:  
The margin is still there.

Expected Results:  
Reviewing the css, there should not be a margin. As there is none in all other browsers.

Comment 1

[Thomas Ahlblom]

http://jigsaw.w3.org/css-validator/ reports 23 CSS errors:

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.creativeworkx.at%2F&profile=css21&usermedium=all&warning=1&vextwarning=&lang=en

Does the problem still remain after correcting those errors?

Comment 2

[mailkistl]

Those errors are not really errors. I think the css validator currently (or intentionally) does not recognize vendor specific prefixes.
The selected profile you have used for validating my css  is not correct. It should be css3 not 2.1

Comment 3

[Robert Utasi [:hunboy]]

Attachment: testcase+workaround

Reporter, when you define constant width/height, or especially use float inside the block element, it's hardly recommended to use overflow:hidden rule for the wrapper <div>. This fixes several troubles in IE6/7 too and makes your site cross compatible.

I'm 99.99% sure if this is a dupe of Bug 451791

Comment 4

[mailkistl]

Robert, thank you very much for your testcase and provided workaround.
Unfortunately, I am a bit confused right now.
You tell me that "it's HARDLY recommended to use overflow:hidden rule", but in your provided testcase you suggest using overflow:hidden as a workaround.
All my css files do not contain "overflow:hidden" rul.
Do you mean it's strongly recommended?

Comment 5

[Mats Palmgren (inactive)]

A simpler workaround is to add a bit of padding to stop the margins
from collapsing through the clearance.  For example:
<div style='clear:both;padding-bottom:0.1px;'></div>