CODEWITHSUNDEEP
htmlcssfirefox
tgun926
tgun926

Reputation: 1633

A div straight after the body causes a large top margin in firefox only

I have looked over previous answers, but they're all related to pages where they are floating elements, etc. This is a simple page with one h1 and p element:

<body>
    <div class="title">
        <h1 id = "main_title">Chocolate Eclairs</h1>
    </div>
    <div class="main">
        <p>A simple french treat.</p>
    </div>
</body>

The CSS (for clarity):

body{   background-color: pink; margin: 0; }
h1{ background-color: blue;}
.main{ background-color: white;}

This produces a gap at the top of the page, and body is starting not right at the top.

Starting with a div If I comment out the first div element, so that it starts with h1 first, it disappears:

Starting without a div

So, how do I fix this? My page relies on starting with a div element, and firefox (26.0) is the only browser producing this.

Upvotes: 0

Views: 789

Answers (6)

Paramjot Singh
Paramjot Singh

Reputation: 1

Guys I found the solution to this it's very easy Please make sure that there is a space between <! And DOCTYPE And Html> and then margin:0px; in the body.

  <! DOCTYPE html>
...
<body style="margin:0px;">
...

Upvotes: -1

icktoofay
icktoofay

Reputation: 129001

You've been bitten by quirks mode and collapsing margins. Under certain circumstances (elaborated upon in great detail in the standard), the margin of a child element (in this case, the h1) will be transferred to the enclosing element. However, your document has no DOCTYPE, so browsers go into quirks mode, where not all rules are obeyed. It seems that in this case Firefox still obeys that rule, but the others might not.

The solution is to

  1. add an appropriate DOCTYPE at the top of your file

    <!DOCTYPE html>

  2. add rules to remove the margin from the h1

    h1 { margin: 0; }

Upvotes: 2

Schien
Schien

Reputation: 3903

By default, the heading tags H1, H2, etc. have top margins. Top margins are not correctly contained in Firefox.

Try h1{padding:0;margin:0} to debug the issue. Then use padding-top to replace margin-top.

I'd advice you against using reset sheets. They come with side effects.

Upvotes: -2

codeaddict
codeaddict

Reputation: 879

What you're seeing is the default styles on the elements. You need to take a look at css resets, a popular one is Eric Meyer's reset.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Usually what I do, is something like this at the top of your stylesheet.

* {
  margin:0;
  padding:0;

 /* A better box model */
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
  box-sizing:border-box;
}

Selects all elements, and removes margin and padding. Also using the box-sizing:border-box. Which is a much more intuitive CSS box model. Where padding, and borders don't add to the actual set width of your elements. You can read more via paul irish.

Upvotes: 1

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

use this css,just added a margin:0px in the h1 style

body{   background-color: pink; margin: 0; }
h1{ background-color: blue;margin:0px}
.main{ background-color: white;}

and the DEMO is here

Upvotes: 1

Zword
Zword

Reputation: 6793

Try setting the same style as body to html:

html,body{   background-color: pink; margin: 0; }

Upvotes: 0

Related Questions