Css auto margin does not center the block in IE 8

Discussion in 'CSS' started by Om ji Kesharwani, Oct 23, 2009.

  1. #1
    Please look at the markup...
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    body{
    	margin: 0px;
    }
    .Content {
    	width:500px;
    	margin:0px auto;
    	text-align:left;
    	padding:15px;
    	border:1px dashed #333;
    	background-color:#eee;
    	}
    
    </style>
    </head>
    <body>
    
    <div class="content">
    Here is the paragraph...
    </div>
    </body>
    </html>
    HTML:
    Center the contents in firefox but not in IE 8.
    I think there is some problem with auto in IE
    Am i right?
     
    Om ji Kesharwani, Oct 23, 2009 IP
  2. Curtis Hunter

    Curtis Hunter Well-Known Member

    Messages:
    195
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    110
    #2
    In your CSS, you spelt ".Content" with a capitol C.

    However, in your HTML, you put "<div class="content">" with a lower case C. Maybe IE doesn't know the difference, and Firefox ignores capitol/lower case letters.

    Try changing the capitol C to lower case and see what happens.
     
    Curtis Hunter, Oct 23, 2009 IP
  3. Om ji Kesharwani

    Om ji Kesharwani Peon

    Messages:
    211
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    i checked it by correcting the class content name but im getting the same problem.
     
    Om ji Kesharwani, Oct 23, 2009 IP
  4. MhW

    MhW Active Member

    Messages:
    370
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    85
    #4
    Use this:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    <style type="text/css">
    body{
        margin: 0px;
    }
    .content {
        width:500px;
        margin:0px auto;
        text-align:left;
        padding:15px;
        border:1px dashed #333;
        background-color:#eee;
    }
    </style>
    </head>
    
    <body>
    <div class="content">
    Here is the paragraph...
    </div>
    </body>
    </html>
    
    Code (markup):
    Seems IE8 doesn't like rendering pages without a doctype specified at the top of the document. Oh, and when there is a doctype involved, remember that div class/ID names become case sensitive. ;)
     
    MhW, Oct 23, 2009 IP
  5. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Just to add a DOCTYPE is a requirement for all pages to render properly, otherwise it sends IE to use quirks mode.
     
    wd_2k6, Oct 23, 2009 IP
  6. Om ji Kesharwani

    Om ji Kesharwani Peon

    Messages:
    211
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Thanks your code is working ...
    I have used these two line many time but dont know actualy whts the use of it could you explain me...
     
    Om ji Kesharwani, Oct 23, 2009 IP
  7. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #7
    kk5st, Oct 23, 2009 IP