CODEWITHSUNDEEP
htmlcssfirefox
Artur Keyan
Artur Keyan

Reputation: 7683

margin issue in FireFox

I have a margin issue in Firefox which totally works 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 is screenshots

Firefox: enter image description here

Opera & Chrome: enter image description here

That margin over header appears only in Firefox. What is the reason of that behavior?

ISSUE : when I give margin to section, the header is "margining"

Upvotes: 7

Views: 7531

Answers (5)

Artur Keyan
Artur Keyan

Reputation: 7683

instead of i used Css: overflow: auto for header, it is working. But I can't reply why

Upvotes: 0

ptriek
ptriek

Reputation: 9276

You could also fix it by using another clearfix:

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

Upvotes: 1

ramblex
ramblex

Reputation: 3057

Try giving the header a height:

header {
  height: 100px;
}

(setting the overflow to hidden works too)

header {
  overflow: hidden;
}

Upvotes: 7

Yanki Twizzy
Yanki Twizzy

Reputation: 8001

Yes it does happen. To solve it, you can use a reset style sheet. Reset Stylesheet sample

Upvotes: 0

Code Lover
Code Lover

Reputation: 8348

Try to add below code into your css

*{
margin:0;
padding:0;
}

OR

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

or both

Upvotes: 0

Related Questions