...

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



AaronW
10-23-2004, 05:05 PM
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:



#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

mindlessLemming
10-24-2004, 12:30 AM
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.
:thumbsup:

AaronW
10-24-2004, 01:31 AM
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 :(

mindlessLemming
10-24-2004, 02:17 AM
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? :confused: 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:


#header {
position: absolute;
top:15px;
}

and then add

padding-top:95px;
to the body CSS.

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

AaronW
10-24-2004, 03:06 AM
Oh right. I guess IE doesn't break when the parent is absolutely positioned. That's the bit I needed to know :P

Thanks.

AaronW
10-24-2004, 03:09 AM
Ah, super. Worked a charm. Guess I'll have to start thinking even futher out of the box... Yeesh.

mindlessLemming
10-25-2004, 12:54 AM
Of course it worked :p :D
(I checked first!;))



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum