How to center my design?

Discussion in 'CSS' started by Breakpoint, Dec 27, 2006.

0
  1. #1
    I am sort of new to using CSS and HTML and I am having trouble with the IE/Firefox browser conflict.

    I am trying to center my site (which isnt finished) but IE is not centering it like it does in Firefox.

    Here is the webpage www.breakpointdesigns.com/nathan (Im not involved in the main site yet)

    He is the code
    <html>
 <head>
  <style type="text/css">
   #center 
   { 
    width:671px; 
    margin:0px auto; 
    text-align:left; 
   }

   #width 
   { 
    width:671px; 
   } 

   #header 
   { 
    width:671px; 
    height:96px; 
   } 

   #top_gradient 
   {
    width:611px;
    float:left; 
    height:18px;
    background-image:url("images/top-gradient.gif"); 
    background-repeat:repeat-x; 
   } 
  </style>
 </head>
 <body>
  <div id="center">
   <div id="width"> 
    <div id="header"> 
     <div id="top_gradient">
     </div> 
    </div> 
   </div>
  </div> 
 </body>
</html>
    Code (markup):
    Could you please tell me how I can center the page in both IE and Firefox?
     
    Breakpoint, Dec 27, 2006 IP
  2. grantmoney

    grantmoney Well-Known Member

    Messages:
    101
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    138
    #2
    ie will use text-align to center so try putting in

    body {text-align: center;}

    into your css. that should fix it up/
     
    grantmoney, Dec 27, 2006 IP
  3. Breakpoint

    Breakpoint Peon

    Messages:
    164
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    thank you, it worked :)

    here is my new code for anyone who is curious
    <html>
 <head>
  <style type="text/css">

   body 
   {
    text-align: center;
   }

   #center 
   { 
    width:671px; 
    margin:0px auto; 
    text-align:left; 
   }

   #width 
   { 
    width:671px; 
   } 

   #header 
   { 
    width:671px; 
    height:96px; 
   } 

   #top_gradient 
   {
    width:611px;
    float:left; 
    height:18px;
    background-image:url("images/top-gradient.gif"); 
    background-repeat:repeat-x; 
   } 
  </style>
 </head>
 <body>
  <div id="center">
   <div id="width">
    <div id="header"> 
     <div id="top_gradient">
     </div> 
    </div> 
   </div> 
  </div>
 </body>
</html>
    Code (markup):
     
    Breakpoint, Dec 27, 2006 IP
  4. datropics

    datropics Peon

    Messages:
    309
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    0
    #4
    wow - kewl.

    I always did a center div then a left div which allways worked but this does the same thing - thanks man!
     
    datropics, Dec 28, 2006 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    If you use a complete and proper DTD as the first line of your document, IE will render in standards mode. Else, it is in quirks mode, where it does not support margin-left | right: auto;

    In standards mode, IE has pretty good support for css1.

    cheers,

    gary
     
    kk5st, Dec 29, 2006 IP
  6. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I was just about to suggest the same thing, Gary. Use a proper DOCTYPE. I prefer XHTML Strict, but others get along just fine with HTML 4.01 Strict, or even a Transitional flavor of either HTML or XHTML.

    Just pick something that works for you and go with it until you feel more comfortable using something else. :)

    Good luck and happy coding!
     
    Dan Schulz, Dec 29, 2006 IP
  7. scoxy

    scoxy Peon

    Messages:
    332
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Like others have said, use a doctype. Also, you don't need

    margin:0px auto

    It's better not to specify a type of measurement when your value is 0.

    Instead use,

    margin: 0 auto;
     
    scoxy, Dec 30, 2006 IP