Home/ Questions/Q 7614663
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T02:27:42+00:00

Here is a piece of HTML that does not display well in Firefox (10)

  • 0

Here is a piece of HTML that does not display well in Firefox (10)

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style>
            * { margin: 0; padding: 0; }
            .block6 { float: left; margin: 0 10px; width: 460px; }
            .block { position: relative; }
            .block:after {
                clear: both;
                content: "";
                display: block;
                margin-bottom: 40px;
            }
            header { margin-bottom: 40px; }
            .wie { text-align: center; }
            .w {
                margin: 0 auto;
                padding: 0 10px;
                text-align: left;
                width: 960px;
            }
        </style>
    </head>
    <body>
        <header>
            <div class="wie">
                <div class="w">
                    <div class="block">
                        <div class="block6">
                            aa
                        </div>
                        <div class="block6">
                            bb
                        </div>
                    </div> <!-- block -->
                </div> <!-- w -->
            </div> <!-- wie -->
        </header>
    </body>
</html>

The problem is that an “extra” space on the top is displayed.
If I set:

header {
    margin-bottom: 0;
}

The extra space disappears.
I think the error is in the block or block6 class. Any suggestion?

In Chrome displays well.

EDIT:

Here is a link: http://jsfiddle.net/wARzA/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is an odd bug, but many things like setting a top border make the bug disappear. Perhaps the cleanest way is this:

    header { min-height: 1px; }
    • 0