Div not starting at the top of page? [Firefox]

GloStix

From some reason the entire webpage start about 5px from the top. I've margin:0 auto; the whole thing plus margin-top:0px; the whole thing too...

Expand|Select|Wrap|Line Numbers

 
#container {

    width: 700px;

    font-family: serif;

    font-size:14px;

    color: #222222;

    margin:0 auto;

    border-left:solid 1px #333333;

    border-right:solid 1px #333333;

    margin-bottom:0px;

    margin-top:0px;

}
 
#wrapper {

    width:750px;

    margin:0 auto;

    background-image: url(repeat-y-back.gif);

    background-repeat:repeat-y;

    margin-bottom:0px;

    margin-top:0px

}
 
body {

    text-align: center;

    margin-bottom:0px;

}
 
#banner {

    width: 700px;

    height: 150px;

    text-align:center;

    background-image: url(JamesBanner.gif);

    margin-top:0px

}
 
h1 {

    color:#ffffff;

    display: block;

    width: 700px;

    padding-left:0px;

    padding-right:0px;

    padding-bottom:3px;

    padding-top:3px;

    margin-top:0px;

    margin-bottom:5px;

    border-top: solid 1px black;

    border-bottom: solid 1px black;

    background-color: #666666;

    background-image: url(heading.gif);

    font-size:16px;

    text-align:center;

    font-family: Verdana;

    font-style:italic;

    height:19px

}
 
#content {

    padding-left:10px;

    padding-right: 10px;

    width: 680px;

    text-align:left;

    margin-bottom:0px;

}
 
#footer {

    margin:0 auto;

    margin-top:0px;

    width:750px;

    height:50px;

    background-image: url(footer.gif);

}
 
#links {
 
    }

drhowarddrfine

Get a quicker, more complete answer.

GloStix

HTML

Expand|Select|Wrap|Line Numbers

 
<html>

<head>

<title>James Mann - Portfolio</title>

<link rel="stylesheet" href="styles.css" type="text/css">
 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><style type="text/css">

<!--

body {

    background-color: #9cad32;

}

-->

</style></head>
 
<body>

<div id="wrapper">

<div id="container">
 
<div id="banner">

<a href="#"></a>

</div>

<!--<div id="links">

<a href="#">Home</a>

</div>

-->
 
<h1>Biography</h1>

<div id="content">

<p> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
 
 <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
 
 <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
 
 <p> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
 
</div>
 
</div>

<div id="footer">
 
</div>

</div>
 
</body>

</html>

GloStix

Get a quicker, more complete answer.

Okay I posted the rest (this forum needs an edit option >.>)

crazeway

probably the padding on <h1>Biography</h1>. I've had this problem in Firefox before

GloStix

probably the padding on <h1>Biography</h1>. I've had this problem in Firefox before

I don't think so =\ It was like that before I messed around with the padding.

crazeway

different browsers have different default paddings for certain elements. I like to start my css with * {margin: 0; padding: 0;} to avoid these cross-browser inconsistencies. Add this and see if it fixes the problem.

or try removing the margin-top: 3px from your h1 style

drhowarddrfine

It is not a "Firefox problem" and "cross browser problems" rarely are. Modern browsers treat <html> and <body> as stylable elements so it might be the margin assigned to the body (where IE screws up and is the real source of "cross browser problems"). So that is why the universal zeroing of margin you show works.

Better:
html,body{margin:0}

In addition, you don't show a doctype. Without a proper doctype, IE is in quirks mode and doesn't attempt to act like any modern browsers, such as Firefox.

Note: I'm going to bed and didn't test if this is the fix. If it isn't, say so and I'll look again in the morning.

GloStix

Expand|Select|Wrap|Line Numbers

 
html,body {

    margin:0;

    padding:0;

}

Fixed!

Thank you good people :)

jsbryant

RE: crazeway
different browsers have different default paddings for certain elements. I like to start my css with * {margin: 0; padding: 0;} to avoid these cross-browser inconsistencies. Add this and see if it fixes the problem.

or try removing the margin-top: 3px from your h1 style

---

AHA! THANK YOU! I was trying everything and this was the only thing that worked.

Div not starting at the top of page? [Firefox]

Post your reply

Similar topics

Question stats

	Ask Question
Home Questions Articles Browse Topics Latest Top Members FAQ