www.webdeveloper.com
Results 1 to 10 of 10

Thread: Aligning div in center of page horizontally in IE

  1. #1
    Join Date
    Jan 2004
    Posts
    198

    Aligning div in center of page horizontally in IE

    How do you align a div horizontally in the center of a page in IE? I know that this is done easily in Mozilla browsers by setting the left and right margins to auto, but is there a simple way that will work for IE as well? I know about setting left to 50%, and then a negative left margin that is half the width of the div you are centering, but I was wondering if there is an easy, simple way to center a div for both IE and Mozilla browsers.

  2. #2
    Join Date
    Aug 2003
    Posts
    1,576
    ie 6 will do it with auto margins if you are in a strict enough doctype. Other versions you have to apply text-align:center to the parent.

  3. #3
    Join Date
    Jan 2004
    Posts
    198
    I tried changing my DTD to Strict, but I still had no luck....

    This is the DTD I am using:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    And this is the code I am using for the div (the portion commented out worked for both IE 6 and Mozilla browsers, as it is now only works for Mozilla browsers):

    PHP Code:
    div#msgBox {
        
    border2px solid #000000;
        
    heightauto;
        
    min-height1em;
        
    width600px;
            
    positionrelative;
        
    padding1em 2em;
        
    /*margin-left: -300px;
        left: 50%;*/
        
    margin-rightauto;
        
    margin-leftauto;

    Do you notice something that I happen to be missing someplace?

  4. #4
    Join Date
    Aug 2003
    Posts
    1,576
    that should work... how about the full source?

  5. #5
    Join Date
    Jan 2004
    Posts
    198
    Full source is below....

    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style>
    div#msgBox {
    	border: 2px solid #000000;
    	height: auto;
    	min-height: 1em;
    	position: relative;
    	padding: 1em 2em;
    	width: 600px;
    	/*margin-left: -300px;
    	left: 50%;*/
    	margin-right: auto;
    	margin-left: auto;
    }
    
    .myClass {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 1em;
    	font-weight: bold;
    	color: #FF0000;
    	text-decoration: none;
    	text-align: center;
    }
    
    #botRightText {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: xx-small;
    	width: auto;
    	position: absolute;
    	bottom: 0;
    	right: 0;
    	margin-right: 0.25em;
    	margin-bottom: 0.25em;
    	text-decoration: underline;
    	color: #000000;
    }
    </style>
    </head>
    
    <body>
    <div id="msgBox" class="myClass">
    	Sample text in my message box. 
    	<div id="botRightText">Text</div>
    </div> 
    </body>
    </html>

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>center contents</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    <!--
    #text {text-align: center}
    #alignment {text-align: left; margin: auto auto; width:60%;}
    p {background:red;}
    -->
    </style>
    
    </head>
    <body>
    <div id="text"><div id="alignment">
    <p>contents</p>
    </div></div>
    </body>
    </html>

  7. #7
    Join Date
    Aug 2003
    Posts
    1,576
    This:
    Originally posted by wood_tah
    <?xml version="1.0" encoding="iso-8859-1"?>
    throws IE into quirks mode, lose it and IE6 will center it you'll still need the hack Fang showed you if you want IE5/IE5.5 to center.

  8. #8
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    All you need to do is add these body styles in. I always use the xml decleration and if anything I find it helps that IE is in quirks mode, at least that way I don't need hacks to differentiate between IE5 and IE6:
    Code:
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!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>
    <title>Untitled Document</title>
    <meta http-equiv="content-script-type" content="text/javascript" />
    <meta http-equiv="content-style-type" content="text/css" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">/*<![CDATA[*/
    
    body{
    	text-align:center;
    }
    
    div#msgBox {
    	border: 2px solid #000000;
    	height: auto;
    	min-height: 1em;
    	position: relative;
    	padding: 1em 2em;
    	width: 600px;
    	/*margin-left: -300px;
    	left: 50%;*/
    	margin-right: auto;
    	margin-left: auto;
    }
    
    .myClass {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 1em;
    	font-weight: bold;
    	color: #FF0000;
    	text-decoration: none;
    	text-align: center;
    }
    
    #botRightText {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: xx-small;
    	width: auto;
    	position: absolute;
    	bottom: 0;
    	right: 0;
    	margin-right: 0.25em;
    	margin-bottom: 0.25em;
    	text-decoration: underline;
    	color: #000000;
    }
    /*]]>*/</style>
    </head>
    
    <body>
    <div id="msgBox" class="myClass">
    	Sample text in my message box. 
    	<div id="botRightText">Text</div>
    </div> 
    </body>
    </html>
    Every fight is a food fight when you’re a cannibal.

  9. #9
    Join Date
    Sep 2003
    Location
    Seattle
    Posts
    159
    Originally posted by lavalamp
    I always use the xml decleration and if anything I find it helps that IE is in quirks mode, at least that way I don't need hacks to differentiate between IE5 and IE6:
    Damn good idea, I gotta try that. So throwing IE6 into quirks mode makes it render identically to IE 5? Or pretty close to it? Is it still valid XHTML to do this?

  10. #10
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    They don't always render the same, but at least when IE6 is in quirks mode they have the same crappy box model. Saves any confusion.
    Every fight is a food fight when you’re a cannibal.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles