471,892 Members | 1,862 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

home > topics > html / css > questions > css to center page with no top space

Join Bytes to post your question to a community of 471,892 software developers and data experts.

CSS to center page with no top space

14
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..
Jan 28 '08 #1
19 32086
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}
Jan 28 '08 #2
torweb
14
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
Jan 28 '08 #3
Death Slaught
1,137 1GB
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
Jan 28 '08 #4
torweb
14
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. }
Jan 28 '08 #5
Death Slaught
1,137 1GB
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
Jan 28 '08 #6
torweb
14
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>
Jan 30 '08 #7
Death Slaught
1,137 1GB
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
Jan 30 '08 #8
jcorp
1
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.)
Jan 31 '08 #9
torweb
14
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>
Jan 31 '08 #10
Death Slaught
1,137 1GB
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
Jan 31 '08 #11
Death Slaught
1,137 1GB
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
Jan 31 '08 #12
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!!!!!
Jul 1 '08 #13
Death Slaught
1,137 1GB
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](")
(")(")
Jul 2 '08 #14
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. }
Aug 15 '08 #15
eWish
971 Expert 512MB
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
Aug 15 '08 #16
@Death Slaught
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!
Aug 4 '09 #17
Hey thats so simple

Set your margin for <body> tag

body{
text-align:center;
margin-top:0px;
}
Apr 8 '10 #18
Thanks Death. Would you mind explaining what the '*' defines though?
Sep 28 '10 #19
Death Slaught
1,137 1GB
@a new eRRoR
An asterisk, '*', in CSS is "The Universal Rule". When HTML is rendered in your browser, margin and padding are added to the elements. For example:

If you have an image on your page.
Expand|Select|Wrap|Line Numbers
  1. <img src="iamanimage.gif" alt="I am an image" />
Even without any stylings added to the page, the placement of the image could differ in Internet Explorer and Firefox. Internet Explorer could basically say,
Expand|Select|Wrap|Line Numbers
  1. img {
  2.         margin: 10px 20px 10px 30px;
  3.         padding: 0 5px 0 5px;
  4. }
and Firefox could say,
Expand|Select|Wrap|Line Numbers
  1. img {
  2.         margin: 20px 10px 20px 10px;
  3.         padding: 5px 0 5px 0;
  4. }
These values are not literal but I'm using them to give you a basic idea of what's going on. These values are added to whatever rules you create in your CSS. Thus the extra or lack of margin and padding across each browser.

Thanks,
{\_/}
(' . ')
(")[Death](")
(")(")
Sep 28 '10 #20

Post your reply

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

Similar topics
Center page / absolute positioning
7 posts views Thread by Thomas Elser | last post: by
Javascript to produce page break
3 posts views Thread by Jennie | last post: by
How to remove page break?
9 posts views Thread by opt_inf_env | last post: by
Center page
4 posts views Thread by Harris Kosmidhs | last post: by
Unable to center div
7 posts views Thread by dangermouse | last post: by
CSS center page alignment
6 posts views Thread by FrEaKmAn | last post: by
Markdown-ImageLocalize
reply views Thread by YellowAndGreen | last post: by
how to create picsart png ?
reply views Thread by zermasroor | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2023
About Bytes
Advertise
Terms Of Use
Privacy Policy
Contact Us
Sitemap

Follow us! Get the Latest Bytes Updates