SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Mobile
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Because there is no MAX-Width in IE...?

    What I've been trying to do is center a block of text in a div. The text itself is aligned left, but the <p>, <ul>, <div> in which the text reside is actually in the middle of a parent div.

    It is like putting all the items in a cardboard box on the left side (of the box). The items in the box are not centered in the box but are on the left side. The box however is not on the left side of the room but in the center. So the position of the box to the walls of the room is the middle or center. the position of the items in the box are against the left wall of the box.

    That way my text looks normal (left-aligned) but it is moved to the center of the parent div. This would be best if i could use max-width because i wouldn't have to worry about short paragraphs or lists appearing uncentered.

    I'm guessing this can't be done without using some type of hack?
    Can it be done somehow without margins?
    My only concern about hacks is that they become obsolete then I'll have to figure out why my pages don't work.

    Thanks!

  2. #2
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, try giving the element you want to center a margin of a 0 auto ( margin: 0 auto; )

    This will workin all but IE i think.
    edit: margin: 0 auto works in standards compliance mode in IE


    for IE support you need to use tables

    final output I use:
    <table border=0>
    <tr>
    <td class="centered">
    <div class="centered"> Centered content here </div>
    </td>
    </tr>
    </table>

    td.centered {
    text-align: center;
    }

    .centered {
    position: relative;
    margin: 0 auto;
    text-align: left;
    }


    Just place the table and maybe you need to set the width and height to equal of the parent
    Last edited by hannson; Apr 13, 2006 at 14:13.

  3. #3
    SitePoint Guru
    Join Date
    Aug 2003
    Location
    CT
    Posts
    643
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please post your code. It's hard to give advice without seeing what you're working with. Tables are NOT the answer.
    My Blog: SkeyMedia.com

  4. #4
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Although I agree with briansol I know no other way to do this

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Colorado
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this in your css:

    max-width:955px; width:expression(document.body.clientWidth > 955? "955px": "auto" );

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    My only concern about hacks is that they become obsolete then I'll have to figure out why my pages don't work.
    Only use hacks that target dead browers and they will never become obsolete. Don't hack for modern browsers as most don't need them anyway. * html is 100% safe for ie6 and under because ie7 doesn't support it and doesn't need it. (Or Use conditional comments of course).

    There ie virtually no need to hack for any other browser apart from ie.

    Quote Originally Posted by scuba addict
    Try this in your css:

    max-width:955px; width:expression(document.body.clientWidth > 955? "955px": "auto" );
    You first have to determine what mode the browers is working in otherwise this could crash it. If ie is in quirks mode it needs a different format to standard mode.

    a min and max width expression.
    Code:
    <!--[if gte IE 5]>
    <style type="text/css">
    #wrapper {width:expression(
    (d = document.compatMode == "CSS1Compat" ? document.documentElement : document.body) &&
    (d.clientWidth > 1024 ? "1024px" : d.clientWidth < 770 ? "770px" : "auto"));
    }
    </style>
    <![endif]-->
    Quote Originally Posted by jacobpressures
    This would be best if i could use max-width because i wouldn't have to worry about short paragraphs or lists appearing uncentered.
    You lost me there lol. I don't see what max-width has to do with centering things.

    You probably need to post a code example of what you have got so that we can give specific answers

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2003
    Location
    Mobile
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is one of my pages. Almost all the links work. There are many pages like this one. http://www.wingfling.org/wingfling/donations.htm

    Anything that has text-aligned left is aligned to the left itself. I only want the text to align to the left and not element enclosing the text.

    Here are my content div code below.

    #content {
    BORDER-TOP-WIDTH: 0px;
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    BORDER-LEFT-WIDTH: 0px;
    MIN-HEIGHT: 100%;
    FLOAT: left;
    BORDER-BOTTOM-WIDTH: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 11px 0px 30px 10px;
    WIDTH: 617px;
    PADDING-TOP: 0px;
    BACKGROUND-COLOR: #fff;
    TEXT-ALIGN: center;
    BORDER-RIGHT-WIDTH: 0px
    }


    #content LI {
    WIDTH: 290px;
    COLOR: #000;
    TEXT-ALIGN: left
    }

    In my opinion centering the box is different from aligning the text within the box.

    Thanks!

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Here is an example using different kinds of centering which I think covers all the points you were making.

    There are elements and blocks of unspecifed width which are centred. The text within the blocks can be aligned left, right or centre as required.

    There are block level elements centred in the normal way also just for comparison.

    http://www.pmob.co.uk/temp/centre-no-width5.htm

    Hope it was what you wanted

  9. #9
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Mobile
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That looks EXACTLY like what i want!

    Thanks Paul!


Bookmarks

Posting Permissions

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