Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 16
  1. #1
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    Okay, I've used a technique that is outlined in many websites that basically uses margin: 0px auto; and text-align:center; to center some divs, and it's working beautifully in every browser except IE. Once I added in some positioning CSS as well (for height) it suddenly decided to align the entire div to the right (WTF)

    here's the url: http://www.staging.neathdesign.com/neathdesign/

    URL validates as XHTML and CSS

    Anyone care to help me so it doesn't look retarded in IE?
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  2.  

  3. #2
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    Have you tried:
    Code:
    div.centered
    {
        margin-left:auto;
        margin-right:auto;
        text-align:center; /* redundancy */
    }
    ?
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  4. #3
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    that's exactly what margin: 0px auto; does
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  5. #4
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    Okay, I figured out the culprit - it seems whenever you use position:absolute the margin: 0px auto; gets totally thrown out and it aligns right (IE only).

    I can fix the text, but not the header since I have content before images (SEO) and therefore the header must be positioned...
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  6. #5
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    the best way i have found to center anything with css is to set the left edge of your element to the center of the container then back it up half the width of the positioned element.. such as:

    Code:
    slector {
    position:absolute;
    width: 100px
    left: 50%;
    margin-left: -50px;
    }


  7. #6
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    Sweet glyakk... a bit of hacking with that method fixed it, cheers!
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  8. #7
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    glad to hear


  9. #8
    Junior Member
    Join Date
    Mar 2004
    Location
    Durham, NC, US
    Posts
    17
    Member #
    5090
    Originally posted by Brak
    Okay, I figured out the culprit - it seems whenever you use position:absolute the margin: 0px auto; gets totally thrown out and it aligns right (IE only).
    If you read the CSS 2 specifications, it is hard to fault IE in this case. Especially since Mozilla's alternative has a weird quirk. If you specify a width for body, and set it's left and right margins to auto, the body will fall off of the left side of the view port if the window is too narrow. This isn't a problem, but Mozilla won't let you pan left. That is a problem.

    I haven't tried this in Opera, but IE makes everything flow right.

  10. #9
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    Travis G - you're wrong there. I never set the width for the body, rather for a div - and then gave it margins on either side (perfectly legit) The page was rendering 100% in Opera/Gecko/KHTML and failing in IE - amazingly the only browser listed above that does not have full support for standards-compliant code...
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  11. #10
    Junior Member
    Join Date
    Mar 2004
    Location
    Durham, NC, US
    Posts
    17
    Member #
    5090
    Originally posted by Brak
    Travis G - you're wrong there.
    What is there for me to be wrong about? I'm just saying I can understand IE's confusion in a case like this. If you consider this:
    If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' other than 'static', in the following way:
    In the case that the ancestor is block-level, the containing block is formed by the padding edge of the ancestor.
    -CSS 2 Section 10
    Then I wonder if IE would behave like compliant browsers if you set the container's padding to auto. I don't know, I'm not going to bother testing.

    I just reread our last few posts, and I wanted to clear up something I said, incase it is causing confusion:
    but IE makes everything flow right.
    That doesn't mean that IE makes everything flow correctly, it means IE makes everything flow to the right side of the box. It overflows to the right. In my example, Mozilla overflowed to the right and left.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:41 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com