473,728 Members | 1,916 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

CSS to center page with no top space

14 New Member
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 32271
just a feeling
87 New Member
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 New Member
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 Top Contributor
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 New Member
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 Top Contributor
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 New Member
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. margin:0;
  11. padding:0;
  12. }
  13.  
  14. #container {
  15.     width: 980px;
  16.     margin-right: auto;
  17.     margin-left: auto;
  18.     margin-top: none;
  19.     padding: 0px;
  20.     margin: 0px
  21. }
  22. -->
  23. </style>
  24. </head>
  25.  
  26. <body>
  27. <div id="container">
  28.   <table width="100%"  border="0" cellspacing="0" cellpadding="0">
  29.     <tr>
  30.       <td bgcolor="#CCCCCC">&nbsp;</td>
  31.     </tr>
  32.   </table>
  33. </div>
  34. </body>
  35. </html>
Jan 30 '08 #7
Death Slaught
1,137 Top Contributor
You didn't add the asterisk(sp?).T his 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 New Member
You didn't add the asterisk(sp?).T his 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 New Member
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

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

Similar topics

7
13626
by: Thomas Elser | last post by:
Hi, I made a site using CSS absolute positioning for all my content on the page. Now I try to figure out if it is possible to center the pages without giving up the absolute positioning. Can somebody please enlighten me if that's possible and if not what would be the quickest way to accomplish that? Thanks in advance for your help
3
13312
by: Jennie | last post by:
I am looking for a way to make the web page have a formfeed so the info from that spot will go to the top of the next printed page when I file>print the web page. I want it not to break on the screen but when I print the page. Is there such a JavaScript? TY
9
11982
by: opt_inf_env | last post by:
Hello, I have the following fragment in my html document: <h2>Text 1</h2> <small>Text 2</small> If I see this fragment with browser I see empty line between text1 and text2. Do you know how one can remove it?
4
2409
by: Harris Kosmidhs | last post by:
Please check http://www.episfaleia.gr/links.php Why doesn't the page centers on screen? After googling I use for #page margin-left:auto and margin-right:auto. thanks
1
1370
by: blueplato | last post by:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Reflection/Roundcorners Demo</title> <script type="text/javascript" src="scripts/reflection.js"></script> <script type="text/javascript" src="scripts/rounded_corners_lite_inc.js"></script> <style type="text/css">
7
2516
by: dangermouse | last post by:
ok First time here and this is no doubt something really obvious I am overlooking. I use the following css and html to try and center a container div on a page. For the life of me it will not center in FF though. Any ideas?? CSS html, body { margin: 0 auto; padding: 0; text-align: center; font: xx-small Verdana, Geneva, Arial, Helvetica, sans-serif; background-color:#cccccc;
0
721
by: Turbot | last post by:
Hello there, I have a .net user control that I am displaying on a web page using the following syntax for my object tag: <object id='objLauncher' name='objLauncher' Style='width:600px; height: 350px;' classid='MyThing.dll#TutorPro.MyThing'></object> Now, under normal circumstances, this works perfectly fine. The problem occurs if there is a space in the URL to the page using the
6
4953
by: FrEaKmAn | last post by:
Hello I'm wondering if I can align some div to the center of the page (horizontal and vertical). We are talking about the option to scroll up/down and that div still stays at the center. I know that this is possible with JS, but what about CSS? Thanks in advance
0
2871
by: cleary1981 | last post by:
Hi, Heres my xsl stylesheet. Its work in progress but it works. What I want to do however is to make one page in the middle (drawings) a landscape page. Can anyone explain how to do this as all attempts I have made have just gave me an error. <?xml version="1.0" encoding="ISO-8859-1" ?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format"> <xsl:output...
0
8904
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9277
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9198
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9135
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8133
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
4524
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4793
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3236
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2668
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

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.