Margin issue in Firefox

Question

I have a margin problem in Firefox that works fully in other browsers, so this is my HTML

HTML:

// *** means some code

<header> <div class="left"> <div class="logo"> //*** </div> </div> <div class="right"> <div id="log-on"> //*** </div> </div> <div class="clear"></div> </header> <section class="search-seaction"> //*** </section> 

CSS

 .clear { clear:both; } .left { float: left } .right { float: right } .search-seaction { margin-top: 62px; } 

and here are the screenshots

Firefox:

Opera and Chrome:

This marker above the title is displayed only in Firefox. What is the reason for this behavior?

ISSUE : when I give the field for the section, the heading is "margin"

Answer 1

Try setting the title height:

 header { height: 100px; } 

(setting overflow for hidden works too)

 header { overflow: hidden; } 

Answer 2

You can also fix this using another clearfix:

http://jsfiddle.net/dXskZ/1/

Answer 3

Try adding below code to your css

 *{ margin:0; padding:0; } 

OR

 html,body{ margin:0; padding:0; } 

or both

Answer 4

Yes this is true. To solve this problem, you can use the reset stylesheet. Reset Style Sheet Example

Answer 5

instead of using Css: overflow: auto for the header, it works. But I can’t answer why