CSS Div Align Issue

Discussion in 'CSS' started by abc1234, Mar 18, 2007.

  1. #1
    Hi guys,

    I did a quick search on this and couldn't find any results in the first 2 or 3 pages that answered this question.

    I am wanting to center align a div wrapper. The alignment works perfectly in every browser except for IE.

    I have pasted the code that I have in place below:

    #wrapper { width: 657px; margin: 0 auto 0; }

    As a said, the div aligns in FF, Safari but not IE.

    I have done searches on Google and on other forums but I can't find anything that fixes the problem.

    If you need more info, let me know.

    Any help would be appreciated.

    Thanks.
     
    abc1234, Mar 18, 2007 IP
  2. boyponga

    boyponga Banned

    Messages:
    1,013
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Can you please put the url of the site so that I can see?
     
    boyponga, Mar 18, 2007 IP
  3. abc1234

    abc1234 Guest

    Messages:
    55
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Sorry,
    but it's not up on a website at all yet.

    I will copy and paste all the code up here if that is ok with you?

    As you can see, most of the CSS elements have not been put together yet, as I only started this today and I was stumped when trying to center align the divs in IE.

    CSS:

    Web Page:
    Thank you.
     
    abc1234, Mar 18, 2007 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    Is your DTD incomplete? Does anything, even comments, precede the DTD? Either will trigger quirks mode in IE, where it does not grok auto margins.

    cheers,

    gary
     
    kk5st, Mar 19, 2007 IP
  5. Brokentwo

    Brokentwo Peon

    Messages:
    70
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #5
    You have a trailing zero that needs to be deleted.

    #wrapper { width: 657px; margin: 0 auto 0; }

    Should be...

    #wrapper { width: 657px; margin: 0 auto; }

    That should fix it.
     
    Brokentwo, Mar 19, 2007 IP
  6. abc1234

    abc1234 Guest

    Messages:
    55
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Thanks guys for all your efforts but the stuff you guys recommended didn't work, sorry. It still center aligns in FF, Safari and Opera but not in IE - I hate Microsoft, they are so annoying.
     
    abc1234, Mar 19, 2007 IP
  7. urlstand

    urlstand Well-Known Member

    Messages:
    519
    Likes Received:
    78
    Best Answers:
    0
    Trophy Points:
    128
    #7
    Hi

    To make it work in center apply a bit different but easy technique

    put <div align="center"> then start #wrapper and where #wrapper ends put </div> It will work I think for IE now.

    Like follow:

    <html>
    <head>
    <title>Test CSS Page</title>
    <link rel="stylesheet" href="css/screen.css" media="screen" type="text/css">
    </head>
    <body>
    <div align="center">
    <div id="wrapper">
    <div id="header"></div>
    </div>
    </div>
    </body>
    </html>


     
    urlstand, Mar 19, 2007 IP
    abc1234 likes this.
  8. abc1234

    abc1234 Guest

    Messages:
    55
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #8
    urlstand,

    Thanks a lot!:)

    It's working now.:)

    Cheers,
    abc1234
     
    abc1234, Mar 19, 2007 IP
  9. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #9
    You never did answer my questions. If you didn't understand the question, ask for clarification. The use of the <center> tag has been deprecated since 1999, and its use is poor practice. Don't go backwards.

    There is absolutely nothing wrong with this style rule
    
    #wrapper { 
      width: 657px; 
      position:relative; 
      margin:0 auto 0; 
      }
    Code (markup):
    It represents best practice for centering the contents of a page. It will not work in IE if there is not a complete and proper DTD to trigger standards mode.

    cheers,

    gary
     
    kk5st, Mar 19, 2007 IP
    abc1234 likes this.
  10. abc1234

    abc1234 Guest

    Messages:
    55
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Sorry kk5st, I skipped over your post. You were right, I had code before the DTD - but it is fixed now and all working good - I have got rid of the <center> div alignment tag, I feel like a fool - thanks for your help kk5st.
     
    abc1234, Mar 19, 2007 IP
  11. boyponga

    boyponga Banned

    Messages:
    1,013
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #11
    On #wrapper, try adding this, because this helped my site centralize my template:
    #wrapper { width: 657px; position:relative; margin-left:auto; margin-right:auto;}
    PHP:
    Put auto on both left and right margins.
     
    boyponga, Mar 20, 2007 IP
  12. demomarks

    demomarks Peon

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Not sure if this got mentioned but IE doesn't support auto margins for centering but the workaround is to set body { text-align:center } which centers the wrapper. You would then do #wrapper { text-align:left } to have all text within the wrapper go back to left by default. Hope that helps.
     
    demomarks, Mar 21, 2007 IP
  13. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #13
    @demomarks:

    Did you not read my post?

    gary
     
    kk5st, Mar 21, 2007 IP