Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE Blues: Absolute positioning inside relatively-positioned parent isn't working

    Oh IE, if only your mother hadn't been experimenting with drugs during your incubation... http://www.offtone.com/v2/

    My menu is properly positioned in Gecko, but IE assumes that position: absolute refers to the body element and not the div#header in which #menu resides, which is positioined relatively.

    The CSS for my menus positionining:

    Code:
    #header { position: relative; }
    ...
    #menu {
      position: absolute;
      right: 0;
      bottom: 0;
      list-style-type: none;
      margin-right: 22px;
      margin-bottom: 6px;
    }
    Thanks for any ideas for getting IE to put my menu where it belongs,
    Aaron

  • #2
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Mmmm...
    Ok, not what you _want_ to do, but it will work...
    Absolutely position your header and menu; use body-padding-top to push content clear of the header and the page will continue to flow as normal.

    I take no responsibility for the above nonsense.


    Left Justified

  • #3
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah, but if I use that method, any font scaling will screw up the menu. I'm pretty sure I need to use the bottom property.

    Either that or I'll have to decide on a new style for the menu

  • #4
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AaronW
    Ah, but if I use that method, any font scaling will screw up the menu. I'm pretty sure I need to use the bottom property.
    Bleh? I think you misunderstood me...
    Leave the menu positioning exactly how it is. Apply position:absolute; to the header div so that it's child elements won't bug out when ab.pos.
    Now the menu and header should be right, but the content will start up underneath them. Add up the height of the header + its top and bottom margins and set this value as 'padding-top' on the body or containing div, depending on what method you're using. This will push the content clear of the header and the page will look and function the same as it does now.
    Here's the code changes you would make:
    Code:
    #header {
      position: absolute;
      top:15px;
    }
    and then add
    Code:
    padding-top:95px;
    to the body CSS.

    There's always more than one way to skin a cat

    I take no responsibility for the above nonsense.


    Left Justified

  • #5
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh right. I guess IE doesn't break when the parent is absolutely positioned. That's the bit I needed to know :P

    Thanks.

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah, super. Worked a charm. Guess I'll have to start thinking even futher out of the box... Yeesh.

  • #7
    Senior Coder
    Join Date
    Oct 2003
    Location
    Australia
    Posts
    1,963
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Of course it worked
    (I checked first!)

    I take no responsibility for the above nonsense.


    Left Justified


  •  

    Posting Permissions

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