469,304 Members | 1,720 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,304 developers. It's quick & easy.

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

54
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
  1. #container {
  2.     width: 700px;
  3.     font-family: serif;
  4.     font-size:14px;
  5.     color: #222222;
  6.     margin:0 auto;
  7.     border-left:solid 1px #333333;
  8.     border-right:solid 1px #333333;
  9.     margin-bottom:0px;
  10.     margin-top:0px;
  11. }
  12.  
  13. #wrapper {
  14.     width:750px;
  15.     margin:0 auto;
  16.     background-image: url(repeat-y-back.gif);
  17.     background-repeat:repeat-y;
  18.     margin-bottom:0px;
  19.     margin-top:0px
  20. }
  21.  
  22. body {
  23.     text-align: center;
  24.     margin-bottom:0px;
  25. }
  26.  
  27. #banner {
  28.     width: 700px;
  29.     height: 150px;
  30.     text-align:center;
  31.     background-image: url(JamesBanner.gif);
  32.     margin-top:0px
  33. }
  34.  
  35. h1 {
  36.     color:#ffffff;
  37.     display: block;
  38.     width: 700px;
  39.     padding-left:0px;
  40.     padding-right:0px;
  41.     padding-bottom:3px;
  42.     padding-top:3px;
  43.     margin-top:0px;
  44.     margin-bottom:5px;
  45.     border-top: solid 1px black;
  46.     border-bottom: solid 1px black;
  47.     background-color: #666666;
  48.     background-image: url(heading.gif);
  49.     font-size:16px;
  50.     text-align:center;
  51.     font-family: Verdana;
  52.     font-style:italic;
  53.     height:19px
  54. }
  55.  
  56. #content {
  57.     padding-left:10px;
  58.     padding-right: 10px;
  59.     width: 680px;
  60.     text-align:left;
  61.     margin-bottom:0px;
  62. }
  63.  
  64. #footer {
  65.     margin:0 auto;
  66.     margin-top:0px;
  67.     width:750px;
  68.     height:50px;
  69.     background-image: url(footer.gif);
  70. }
  71.  
  72. #links {
  73.  
  74.  
  75.     }
  76.  
Feb 13 '08 #1
9 22181
GloStix
54
HTML
Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <title>James Mann - Portfolio</title>
  4. <link rel="stylesheet" href="styles.css" type="text/css">
  5.  
  6. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><style type="text/css">
  7. <!--
  8. body {
  9.     background-color: #9cad32;
  10. }
  11. -->
  12. </style></head>
  13.  
  14. <body>
  15. <div id="wrapper">
  16. <div id="container">
  17.  
  18. <div id="banner">
  19. <a href="#"></a>
  20. </div>
  21. <!--<div id="links">
  22. <a href="#">Home</a>
  23. </div>
  24. -->
  25.  
  26. <h1>Biography</h1>
  27. <div id="content">
  28. <p> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  29. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  30. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  31. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
  32.  
  33.  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  34. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  35. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
  36.  
  37.  <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  38. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  39. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
  40.  
  41.  <p> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  42. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  43. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
  44.  
  45. </div>
  46.  
  47.  
  48.  
  49. </div>
  50. <div id="footer">
  51.  
  52.  
  53. </div>
  54. </div>
  55.  
  56. </body>
  57. </html>
  58.  

Feb 14 '08 #3
GloStix
54
Get a quicker, more complete answer.
Okay I posted the rest (this forum needs an edit option >.>)
Feb 14 '08 #4
probably the padding on <h1>Biography</h1>. I've had this problem in Firefox before
Feb 14 '08 #5
GloStix
54
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.
Feb 14 '08 #6
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
Feb 14 '08 #7
drhowarddrfine
7,435 Expert 4TB
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.
Feb 14 '08 #8
GloStix
54
Expand|Select|Wrap|Line Numbers
  1. html,body {
  2.     margin:0;
  3.     padding:0;
  4. }
  5.  
Fixed!

Thank you good people :)
Feb 14 '08 #9
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.
Jan 5 '13 #10

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by hilz | last post: by
3 posts views Thread by David Hayes | last post: by
2 posts views Thread by Sara T. | last post: by
4 posts views Thread by lmarceglia | last post: by
12 posts views Thread by CalgaryWebGuy | last post: by
9 posts views Thread by =?Utf-8?B?Sm9obiBCYWlsZXk=?= | last post: by
3 posts views Thread by Cirene | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by harlem98 | last post: by
reply views Thread by harlem98 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.