Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2010
    Location
    Whitley Bay, UK
    Posts
    46
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Centering a container div (IE)

    Hello

    I am creating a web page, but have forgotten how to center a container div, which will work with IE. (I have version 7)

    Normally I use Firefox and my page works fine, also OK with Chrome and Opera, but not with IE. All box is to the left.

    I've made up a small 'test' file and uploaded it to my own site:

    http://www.williebee.co.uk/test.html

    What must I had to center in IE ?

    I'm not interested in IE5, but does IE6, 7 and 8 need the fix

    Many thanks

    Code:
    <!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">
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    
    <title>Testing center container</title>
    <
    
    <style type="text/css">
    
     
    *{
    margin:0px;
    padding:0px;
    }
    
    body{
    background-color:black;
    font-family:Helvetica, Arial, sans-serif;
    }
    
    
    #container{
    	width:960px;
    	height:400px;
    	margin:0px auto;
    	background-color:yellow;
    	text-align:center;
    
    }
    
    </style>
    
    
    </head>
    
    <body>
    
    
    <div id="container">
    jUST SOME TEXT AND SOME MORE AND SOME MORE
    
     </div>
     <!-- main container div has just ended -->
    </body>
    </html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    <title>Testing center container</title>
    <

    <style type="text/css">
    Might be due to that extra character.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    For IE 6 and below in quirks mode does not recognize margin: auto. So you have to trick it by assigning text-align: center; to the body tag.

    Code:
    * {
    margin:0px;
    padding:0px;
    }
    
    body {
    background-color: black;
    font-family: Helvetica, Arial, sans-serif;
    text-align: center;
    }
    
    #container {
    width:960px;
    height:400px;
    margin:0px auto;
    background-color:yellow;
    text-align: left;
    }
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #4
    Regular Coder jdswebservice's Avatar
    Join Date
    Aug 2010
    Location
    Moon Township, PA
    Posts
    107
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Code:
    #box {
    margin: 0 auto;
    }
    body {
    text-align: center;
    }
    This will work. Guaranteed. PM me if you have problems.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •