1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Help with "position:absolute" - IE just won't center!

Discussion in 'CSS' started by Kerosene, Feb 14, 2007.

0
  1. #1
    I'm trying out "position" to get my keyword rich divs higher up in my code - without affecting the visual layout of the page.

    This is the first time I've used "position" and it's screwing up centering in IE.

    Here's my code sample:
    
<div align="center">
<div style="width:600px;">
<div style="width:600px; position:absolute; top:0px; height:40px; background-color:#CC0000">This should be centered!</div>
</div>
</div>
    Code (markup):
    Firefox (left) centers everything correctly, but IE (right) doesn't:
    [​IMG]


    Any ideas?
     
    Kerosene, Feb 14, 2007 IP
  2. unitedrokz

    unitedrokz Peon

    Messages:
    86
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #2
    change this
    <div style="width:600px; position:absolute; top:0px; height:40px; background-color:#CC0000">This should be centered!</div>


    to
    <div style="width:600px; position:absolute; top:0px; left:50%; margin-left:-300px; height:40px; background-color:#CC0000">margin-left needs to be half of the div's width</div>
     
    unitedrokz, Feb 14, 2007 IP
    Kerosene likes this.
  3. Kerosene

    Kerosene Alpha & Omega™ Staff

    Messages:
    11,366
    Likes Received:
    575
    Best Answers:
    4
    Trophy Points:
    385
    #3
    I can't see the sense in that - but it works, thanks :D
     
    Kerosene, Feb 14, 2007 IP
  4. unitedrokz

    unitedrokz Peon

    Messages:
    86
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #4
    thats because you gotta realise what you are doing when you are making an element have absolute position.

    its giving you the ability to specify exactly where you want that element to sit on the page IN RELATION to the TOP LEFT corner of the page.

    so you had the 'top' part specified ok so it sits right up the top, but you didnt say where you wanted it to position itself from the left.

    Remember that now that its absolute, it no longer "listens" (for lack of a better word) to its parented divs so the fact that you have the parent div set to align:center is irrelevant now in this case.

    so the easy way of centering it is telling it to be 50% away from the left...except that takes its measurements from the left edge of the element and not the centre...so you need to bring it back half the size to make it perfectly center which is why you use the margin-left command



    sorry i know thats probably confusing....maybe someone else can explain it better
     
    unitedrokz, Feb 14, 2007 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    This may not mean much, depending on your complete markup. IE, in quirks mode, applies the align attribute[1] to block level descendants, quite wrongly. Combine that with its buggy support in general for absolute positioning, and you've got issues.

    Using absolute positioning as a major layout method for content is likely the poorest of choices. You really should rethink your options.

    If the document structure doesn't reflect the value of the content, is your structure right?

    cheers,

    gary

    [1] This attribute is no longer a part of html, as of html4, Dec., 1999. You're 7+ years behind times if you still use it.
     
    kk5st, Feb 14, 2007 IP