Connecting Tech Pros Worldwide Help | Site Map
bytes > topic > html css > answers

CSS to center page with no top space

Newbie
  
Join Date: Jan 2008
Posts: 14
#1: Jan 28 '08
I'm using CSS to center my pages...which works fine, however I would also like to eliminate the small space at the top so my page is flush with the top of the screen...both in IE and FireFox. The CSS code I'm using is:

Expand|Select|Wrap|Line Numbers
  1. #container {
  2.     width: 980px;
  3.     margin-right: auto;
  4.     margin-left: auto;
  5.     margin-top: none;
  6.  
  7. }
Thanks in advance for any advice..
just a feeling's Avatar
Member
  
Join Date: Aug 2007
Location: Saudi Arabia
Posts: 87
#2: Jan 28 '08

re: CSS to center page with no top space

Hi torweb,

Browsers usually add default margins and paddings on the body and other elements. To eliminate this, write:

Expand|Select|Wrap|Line Numbers
  1. * {margin:0;padding:0}
Newbie
  
Join Date: Jan 2008
Posts: 14
#3: Jan 28 '08

re: CSS to center page with no top space

My #Container is a Div ID. If I change the code to:

Expand|Select|Wrap|Line Numbers
  1. #container {
  2.     width: 980px;
  3.     margin-right: auto;
  4.     margin-left: auto;
  5.     margin-top: none;
  6.     padding: 0px;
  7.     margin: 0px;    
  8. }
It still doesn't remove that space. If I put the padding and margin within the body definition, my page no longer centers. Is this not working as my style section is referring to a div.

Thanks
Death Slaught's Avatar
Site Addict
  
Join Date: Aug 2007
Location: Tennessee
Posts: 952
#4: Jan 28 '08

re: CSS to center page with no top space

As just a feeling pointed out some browsers add padding and margins where there are none. This has nothing to do with your div because it's already there. Add the code that he provided and it should work.

Thanks, Death
Newbie
  
Join Date: Jan 2008
Posts: 14
#5: Jan 28 '08

re: CSS to center page with no top space

Am I doing this wrong as I thought I did put the margin and padding amounts in my container definiton...

Expand|Select|Wrap|Line Numbers
  1. #container {
  2. width: 980px;
  3. margin-right: auto;
  4. margin-left: auto;
  5. margin-top: none;
  6. padding: 0px;
  7. margin: 0px;  
  8. }
Death Slaught's Avatar
Site Addict
  
Join Date: Aug 2007
Location: Tennessee
Posts: 952
#6: Jan 28 '08

re: CSS to center page with no top space

Quote:

Originally Posted by torweb

Am I doing this wrong as I thought I did put the margin and padding amounts in my container definiton...

Expand|Select|Wrap|Line Numbers
  1.  #container { 
  2. width: 980px;
  3. margin-right: auto;
  4. margin-left: auto;
  5. margin-top: none;
  6. padding: 0px;
  7. margin: 0px; 
  8. }
  9.  

lol yes try it like this.

Expand|Select|Wrap|Line Numbers
  1.  * { 
  2. margin:0;
  3. padding:0;
  4. }
  5.  
  6. #container { 
  7. width: 980px;
  8. margin-right: auto;
  9. margin-left: auto;
  10. margin-top: none;
  11. padding: 0px;
  12. margin: 0px; 
  13.  
Thanks, Death
Newbie
  
Join Date: Jan 2008
Posts: 14
#7: Jan 30 '08

re: CSS to center page with no top space

Well...it may be time to hit the bottle. Here is the whole page code (temp page) and still a space. If I can get this figured out I'll always be able to help others like myself.

Thanks

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <title>Untitled Document</title>
  7.  
  8. <style type="text/css">
  9. <!--
  10. { 
  11. margin:0;
  12. padding:0;
  13. }
  14.  
  15. #container {
  16.     width: 980px;
  17.     margin-right: auto;
  18.     margin-left: auto;
  19.     margin-top: none;
  20.     padding: 0px;
  21.     margin: 0px
  22. }
  23. -->
  24. </style>
  25. </head>
  26.  
  27. <body>
  28. <div id="container">
  29.   <table width="100%"  border="0" cellspacing="0" cellpadding="0">
  30.     <tr>
  31.       <td bgcolor="#CCCCCC">&nbsp;</td>
  32.     </tr>
  33.   </table>
  34. </div>
  35. </body>
  36. </html>
Death Slaught's Avatar
Site Addict
  
Join Date: Aug 2007
Location: Tennessee
Posts: 952
#8: Jan 30 '08

re: CSS to center page with no top space

You didn't add the asterisk(sp?).This is what you added:

Expand|Select|Wrap|Line Numbers
  1.  { 
  2.   margin:0;
  3.   padding:0;
  4. }
  5.  
This is what you needed to add:

Expand|Select|Wrap|Line Numbers
  1.  * { 
  2.   margin:0;
  3.   padding:0;
  4. }
  5.  
Thanks, Death
Newbie
  
Join Date: Jan 2008
Posts: 1
#9: Jan 31 '08

re: CSS to center page with no top space

Quote:

Originally Posted by Death Slaught

You didn't add the asterisk(sp?).This is what you added:

Expand|Select|Wrap|Line Numbers
  1.  { 
  2.   margin:0;
  3.   padding:0;
  4. }
  5.  
This is what you needed to add:

Expand|Select|Wrap|Line Numbers
  1.  * { 
  2.   margin:0;
  3.   padding:0;
  4. }
  5.  
Thanks, Death

Death - thanks to you. I have the same issue and your solution worked fine, well in IE, but in FF, it now aligns left when it is set to align center. (same issue that original poster had.)
Newbie
  
Join Date: Jan 2008
Posts: 14
#10: Jan 31 '08

re: CSS to center page with no top space

Thanks for all the great help Death....this worked great in IE and Firefox:
Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2. <!--
  3. #container {
  4.     width: 980px;
  5.     margin-right: auto;
  6.     margin-left: auto;
  7. }
  8. * { 
  9.   margin:0;
  10.   padding:0;
  11. }
  12.  
  13. -->
  14. </style>
Death Slaught's Avatar
Site Addict
  
Join Date: Aug 2007
Location: Tennessee
Posts: 952
#11: Jan 31 '08

re: CSS to center page with no top space

Quote:

Originally Posted by jcorp

Death - thanks to you. I have the same issue and your solution worked fine, well in IE, but in FF, it now aligns left when it is set to align center. (same issue that original poster had.)

Post your code or a link and I'll be glad to help you.

^_^ Thanks, Death
Death Slaught's Avatar
Site Addict
  
Join Date: Aug 2007
Location: Tennessee
Posts: 952
#12: Jan 31 '08

re: CSS to center page with no top space

Quote:

Originally Posted by torweb

Thanks for all the great help Death....this worked great in IE and Firefox:

[HTML] <style type="text/css">
<!--
#container {
width: 980px;
margin-right: auto;
margin-left: auto;
}
* {
margin:0;
padding:0;
}

-->
</style>
[/HTML]

No problem it's what I'm here for.

^_^ Death
Newbie
  
Join Date: Jul 2008
Posts: 1
#13: Jul 2 '08

re: CSS to center page with no top space

Death where do you live!!!!! I WANT TO HUG YOU AND NEVER LET GO this has saved me sooooooooooooooooooo much time and before it was SUPER annoying to fix and you have practically just stopped me from commiting suicide think of it as you have saved many peoples lives and work that was not need to be done THANK YOU!!!!!
Death Slaught's Avatar
Site Addict
  
Join Date: Aug 2007
Location: Tennessee
Posts: 952
#14: Jul 2 '08

re: CSS to center page with no top space

Quote:

Originally Posted by eddberkel

Death where do you live!!!!! I WANT TO HUG YOU AND NEVER LET GO this has saved me sooooooooooooooooooo much time and before it was SUPER annoying to fix and you have practically just stopped me from commiting suicide think of it as you have saved many peoples lives and work that was not need to be done THANK YOU!!!!!

Your welcome...

Thanks,
{\_/}
(' . ')
(")[DEATH](")
(")(")
Newbie
  
Join Date: Aug 2008
Posts: 10
#15: Aug 15 '08

re: CSS to center page with no top space

Hi, I was having the same problem as the original poster. The code provided fixed it, but only in FF. In IE the page is now left aligned. Please help.

The code:
Expand|Select|Wrap|Line Numbers
  1. * {
  2. margin:0px;
  3. padding:0px;
  4. }
  5.  
  6.  
  7. div.container {
  8. width:950px;
  9. height:700px;
  10. background-position:center center;
  11. margin-left:auto;
  12. margin-right:auto;
  13. font-family:calibri, arial, verdana, 'times roman';
  14. font-size:1em;
  15. color:white;
  16. background-color:#181717;
  17. }

Also I want to make a banner start furhter down the page, but when I put a top margin on it the container makes the space again. The code is the same as shown but with the addition of:
Expand|Select|Wrap|Line Numbers
  1. div.heading {
  2. width:650px;
  3. height:100px;
  4. border-style:inset;
  5. border-width:1px;
  6. border-color:white;
  7. background-color:black;
  8. font-family:BankGothic Md BT;
  9. font-size:3em;
  10. color:white;
  11. text-align:center;
  12. background-position:center;
  13. margin-left:auto;
  14. margin-right:auto;
  15. margin-top:10px;
  16. }
eWish's Avatar
Moderator
  
Join Date: Jul 2007
Location: Arkansas
Posts: 900
#16: Aug 15 '08

re: CSS to center page with no top space

torweb and AJM Project,

When posting code samples you are expected to surround your code with the [code][/code] tags. I have edited your posts to include them. In the future please use the code tags.

Thank You,

Kevin
Newbie
  
Join Date: Sep 2006
Posts: 1
#17: Aug 4 '09

re: CSS to center page with no top space

Quote:

Originally Posted by Death Slaught View Post

lol yes try it like this.

Expand|Select|Wrap|Line Numbers
  1.  * { 
  2. margin:0;
  3. padding:0;
  4. }
  5. . . . . . . . .  
  6.  
  7.  
Thanks, Death

Worked a treat for me too Death - FF 3.5, Safari, IE8, Flock.

When I figure out how to get Trackbacks on Blogger, I'll give you some of those too!
Reply

« previous question | next question »

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,272 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved