Simple Block Centering in IE

Discussion in 'HTML' started by damiensawyer@yahoo.com.au, Nov 24, 2008.

  1. Guest

    Hi,

    I'm wondering if someone can help me with something that 'should' be
    easy. What's more, it's something that I've done a dozen times, but
    can't for the life of me figure out what I'm missing 'today'.

    I'm trying to center a <div> using 'auto' margins.

    The following works fine in FF, Chrome, Opera etc (in that the
    #content block is centered). But not in IE.

    Can someone please point out to me what I'm missing?

    Thanks very much in advance,


    Damien



    ---------------------------

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="content-type" content="text/html;
    charset=windows-1250">
    <meta name="generator" content="PSPad editor, www.pspad.com">
    <title></title>

    <STYLE type="text/css">
    * {border:0px; margin:0px;}
    body {margin:10px;}

    #content
    {
    background-color:Yellow;
    margin-left:auto;
    margin-right:auto;
    width:300px;
    }

    </STYLE>

    </head>


    <body>
    <div id="content">
    <h1>Hello World</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Donec commodo magna nec purus. Integer sem nunc, vulputate at, aliquet
    ut, eleifend ut, ante. Vivamus et sapien ut arcu ornare accumsan.
    Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient
    montes, nascetur ridiculus mus. Sed quis erat sed ligula rutrum
    pulvinar. Nam placerat arcu ut arcu. Sed posuere, mi sit amet commodo
    vulputate, mauris lorem pretium purus, volutpat venenatis arcu nunc ut
    orci. Suspendisse potenti. Mauris congue. Sed felis. Ut pellentesque
    lectus quis quam. In lacinia lacus nec metus.</p>
    <p>Nunc eu diam. Praesent et diam vel justo pellentesque
    malesuada. Donec sed diam condimentum neque auctor molestie. Donec
    condimentum commodo erat. Vestibulum ac libero eu libero faucibus
    vestibulum. Cras lorem urna, venenatis ut, rutrum vel, dapibus et,
    magna. Maecenas convallis hendrerit mauris. Maecenas ut nibh id erat
    hendrerit pretium. Pellentesque at libero. Vestibulum placerat. In hac
    habitasse platea dictumst. Aenean euismod commodo mauris. In turpis
    sem, dignissim non, viverra consequat, posuere ac, risus. Donec quis
    quam quis lectus laoreet hendrerit. Curabitur vestibulum leo sed
    massa. Fusce accumsan nulla vel mauris. Sed elementum dolor lobortis
    mauris. Nunc sodales nunc vel purus. Donec vel sapien at diam dictum
    faucibus. </p>
    </div>
    </body>
    </html>
     
    , Nov 24, 2008
    #1
    1. Advertising

  2. richard Guest

    On Sun, 23 Nov 2008 17:51:13 -0800 (PST),
    wrote:

    >Hi,
    >
    >I'm wondering if someone can help me with something that 'should' be
    >easy. What's more, it's something that I've done a dozen times, but
    >can't for the life of me figure out what I'm missing 'today'.
    >
    >I'm trying to center a <div> using 'auto' margins.
    >
    >The following works fine in FF, Chrome, Opera etc (in that the
    >#content block is centered). But not in IE.
    >
    >Can someone please point out to me what I'm missing?
    >
    >Thanks very much in advance,
    >
    >
    >Damien
    >
    >
    >
    >---------------------------
    >
    ><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    ><html xmlns="http://www.w3.org/1999/xhtml">
    > <head>
    > <meta http-equiv="content-type" content="text/html;
    >charset=windows-1250">
    > <meta name="generator" content="PSPad editor, www.pspad.com">
    > <title></title>
    >
    > <STYLE type="text/css">
    > * {border:0px; margin:0px;}


    WTF is the * in reference to?
    I don't believe there is a pseudo class like that.

    What I'd do is quite simple.
    Make 3 columns, set column 1 and 3 to a certain width like 30% or
    whatever.
    No width on column 2.
    Now column 2 should appear to be centered.
     
    richard, Nov 24, 2008
    #2
    1. Advertising

  3. On Nov 23, 8:51 pm, wrote:
    > Hi,
    >
    > I'm wondering if someone can help me with something that 'should' be
    > easy. What's more, it's something that I've done a dozen times, but
    > can't for the life of me figure out what I'm missing 'today'.
    >
    > I'm trying to center a <div> using 'auto' margins.
    >
    > The following works fine in FF, Chrome, Opera etc (in that the
    > #content block is centered). But not in IE.
    >
    > Can someone please point out to me what I'm missing?
    >
    > Thanks very much in advance,
    >
    > Damien
    >
    > ---------------------------
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    ....

    That doctype puts your document in quirks more; thus IE (versions 6-7,
    at least) will behave like older versions (like 5) that mishandled
    CSS. Choose a doctype that puts your document in standards mode and IE
    (version 6 and 7) will behave.

    See:

    <http://gutfeldt.ch/matthias/articles/doctypeswitch.html>

    for help in choosing a doctype.

    Nick

    --
    Nick Theodorakis

    contact form:
    http://theodorakis.net/contact.html
     
    Nick Theodorakis, Nov 24, 2008
    #3
  4. C A Upsdell Guest

    wrote:
    > Hi,
    >
    > I'm wondering if someone can help me with something that 'should' be
    > easy. What's more, it's something that I've done a dozen times, but
    > can't for the life of me figure out what I'm missing 'today'.
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


    The DOCTYPE lacks a URL, so IE (and other browsers) will render the page
    in quirks mode, possibly including IE's broken model for centering
    blocks. Try using ...

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

    .... if you want HTML 4.01 Transitional in standards mode.

    Of course this will not work with IE5, but I assume that you know the
    fix for this.
     
    C A Upsdell, Nov 24, 2008
    #4
  5. dorayme Guest

    In article
    <>,
    wrote:

    > I'm wondering if someone can help me with something that 'should' be
    > easy. What's more, it's something that I've done a dozen times, but
    > can't for the life of me figure out what I'm missing 'today'.
    >
    > I'm trying to center a <div> using 'auto' margins.
    >
    > The following works fine in FF, Chrome, Opera etc (in that the
    > #content block is centered). But not in IE.
    >
    > Can someone please point out to me what I'm missing?
    >

    ....
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    > <html xmlns="http://www.w3.org/1999/xhtml">
    > <head>
    > <meta http-equiv="content-type" content="text/html;
    > charset=windows-1250">


    Replace yours with more like:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html>

    Or better still:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    <html>

    --
    dorayme
     
    dorayme, Nov 24, 2008
    #5
  6. Guest

    Thanks guys - that's great.

    Believe it or not, in 10 years on and off writing HTML, I've never
    actually come across DOCTYPE. It was just one of those lines that I
    left in because it was inserted by the HTML editor.

    I'll have a read about it.

    I have to admit, I felt a bit stupid asking this question - but I'm
    seriously glad that I did now :)


    Damien.
     
    , Nov 24, 2008
    #6
  7. dorayme Guest

    In article <>,
    richard <> wrote:

    > > <STYLE type="text/css">
    > > * {border:0px; margin:0px;}

    >
    > WTF is the * in reference to?
    > I don't believe there is a pseudo class like that.
    >


    TF it is is the universal selector.

    > What I'd do is quite simple.


    That is what any good truck driver would do when he knows no better. You
    are handy and cannot be stopped from achieving your goals when out on
    the road. I admire this.

    > Make 3 columns, set column 1 and 3 to a certain width like 30% or
    > whatever.
    > No width on column 2.
    > Now column 2 should appear to be centered.


    OP, I beg you not to do this... <g>

    --
    dorayme
     
    dorayme, Nov 24, 2008
    #7
  8. rf Guest

    "richard" <> wrote in message
    news:...
    > On Sun, 23 Nov 2008 17:51:13 -0800 (PST),
    > wrote:


    >> <STYLE type="text/css">
    >> * {border:0px; margin:0px;}

    >
    > WTF is the * in reference to?
    > I don't believe there is a pseudo class like that.


    <sigh/> Yes there is. It's the Universal selector.
    http://www.w3.org/TR/CSS21/selector.html#pattern-matching

    You might read the rest of that document while you are there.

    > What I'd do is quite simple.
    > Make 3 columns, set column 1 and 3 to a certain width like 30% or
    > whatever.
    > No width on column 2.
    > Now column 2 should appear to be centered.


    That is not simple.
     
    rf, Nov 24, 2008
    #8
  9. Andy Guest

    <> wrote in message
    news:...
    > Hi,
    >
    > I'm wondering if someone can help me with something that 'should' be
    > easy. What's more, it's something that I've done a dozen times, but
    > can't for the life of me figure out what I'm missing 'today'.
    >
    > I'm trying to center a <div> using 'auto' margins.
    >
    > The following works fine in FF, Chrome, Opera etc (in that the
    > #content block is centered). But not in IE.
    >
    > Can someone please point out to me what I'm missing?
    >
    > Thanks very much in advance,
    >
    >
    > Damien
    >
    >
    >
    > ---------------------------
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    > <html xmlns="http://www.w3.org/1999/xhtml">
    > <head>
    > <meta http-equiv="content-type" content="text/html;
    > charset=windows-1250">
    > <meta name="generator" content="PSPad editor, www.pspad.com">
    > <title></title>
    >
    > <STYLE type="text/css">
    > * {border:0px; margin:0px;}
    > body {margin:10px;}
    >
    > #content
    > {
    > background-color:Yellow;
    > margin-left:auto;
    > margin-right:auto;
    > width:300px;
    > }
    >
    > </STYLE>
    >
    > </head>
    >
    >
    > <body>
    > <div id="content">
    > <h1>Hello World</h1>
    > <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    > Donec commodo magna nec purus. Integer sem nunc, vulputate at, aliquet
    > ut, eleifend ut, ante. Vivamus et sapien ut arcu ornare accumsan.
    > Nulla facilisi. Cum sociis natoque penatibus et magnis dis parturient
    > montes, nascetur ridiculus mus. Sed quis erat sed ligula rutrum
    > pulvinar. Nam placerat arcu ut arcu. Sed posuere, mi sit amet commodo
    > vulputate, mauris lorem pretium purus, volutpat venenatis arcu nunc ut
    > orci. Suspendisse potenti. Mauris congue. Sed felis. Ut pellentesque
    > lectus quis quam. In lacinia lacus nec metus.</p>
    > <p>Nunc eu diam. Praesent et diam vel justo pellentesque
    > malesuada. Donec sed diam condimentum neque auctor molestie. Donec
    > condimentum commodo erat. Vestibulum ac libero eu libero faucibus
    > vestibulum. Cras lorem urna, venenatis ut, rutrum vel, dapibus et,
    > magna. Maecenas convallis hendrerit mauris. Maecenas ut nibh id erat
    > hendrerit pretium. Pellentesque at libero. Vestibulum placerat. In hac
    > habitasse platea dictumst. Aenean euismod commodo mauris. In turpis
    > sem, dignissim non, viverra consequat, posuere ac, risus. Donec quis
    > quam quis lectus laoreet hendrerit. Curabitur vestibulum leo sed
    > massa. Fusce accumsan nulla vel mauris. Sed elementum dolor lobortis
    > mauris. Nunc sodales nunc vel purus. Donec vel sapien at diam dictum
    > faucibus. </p>
    > </div>
    > </body>
    > </html>



    Hi Damien,

    I don't know if you ever fixed this but my working solution is to enclose
    your content div with another div like so...


    <div align="center">
    <div id="content">
    Content goes here
    </div>
    </div>


    ....Hope this helps.

    Andy
     
    Andy, Nov 24, 2008
    #9
  10. Bergamot Guest

    Andy wrote:
    > <> wrote in message
    > news:...
    >>
    >> I'm trying to center a <div> using 'auto' margins.

    >
    > <div align="center">
    > <div id="content">
    > Content goes here
    > </div>
    > </div>


    That's deprecated markup, which *nobody* should be recommending these day.

    > ...Hope this helps.


    I doesn't, even if your target is IE 5x.

    --
    Berg
     
    Bergamot, Nov 24, 2008
    #10
  11. Bergamot Guest

    Ben C wrote:
    > On 2008-11-24, Bergamot <> wrote:
    >> Andy wrote:
    >>> <> wrote in message
    >>> news:...
    >>>> I'm trying to center a <div> using 'auto' margins.
    >>> <div align="center">
    >>> <div id="content">
    >>> Content goes here
    >>> </div>
    >>> </div>

    >> That's deprecated markup, which *nobody* should be recommending these day.

    >
    > Not just deprecated but wrong. Align is only supposed to align the
    > inline contents of a div according to the HTML specification.


    Yes, but this particular sequence of divs was once commonly used to get
    IE 5.x to center that #content div. Those days are long past now.

    --
    Berg
     
    Bergamot, Nov 24, 2008
    #11
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Showjumper
    Replies:
    1
    Views:
    711
    Showjumper
    Mar 19, 2005
  2. Chris Beall

    CSS2 - Centering block boxes

    Chris Beall, Jul 18, 2003, in forum: HTML
    Replies:
    8
    Views:
    520
    Joel Shepherd
    Jul 20, 2003
  3. Noozer

    Block DIV within a block DIV?

    Noozer, Jan 6, 2005, in forum: HTML
    Replies:
    3
    Views:
    11,394
    Mitja
    Jan 6, 2005
  4. Andy
    Replies:
    0
    Views:
    550
  5. morrell
    Replies:
    1
    Views:
    975
    roy axenov
    Oct 10, 2006
Loading...

Share This Page