Disappearing absolutely-positioned elements in IE

[ceeb]

Here's a little problem we've been discussing over at the blogs...
http://www.sitepoint.com/blogs/2010/...on-element-ie/

The issue affects IE6 and IE7 and IE8 in compatibility mode.

Copy the test page code from here:
http://blogs.sitepointstatic.com/exa...-ap/index.html

The challenge is to make the header appear in the correct location in IE6/7 by editing the CSS only and without changing the HTML or JavaScript!

[CupidsToejam]

ok, try and take AP off the header, then adjust the top margin of right col to line up with the others. you may need to tweek margins, but it works on my end

[RyanReese]

Hi, the header has to come last in the source code because the columns are floated . This is a known bug.

<div id="page">

	<div id="left">1. Left column</div>

	<div id="middle">2. Middle column</div>
	
	
	
	<div id="right">4. Right column</div>
	
	<div id="footer">5. Footer</div>
<div id="header">3. Header</div>
</div>

[RyanReese]

http://www.search-this.com/2008/04/0...absolute-mess/

I only tested my solujtion in IE6, so IE7 will probably need the clear:both; on the header if just changing around the HTML doesn't work .

[Paul O'B]

Usually if the absolute element follows a float in the same context you would also need the clear:both as well as putting the absolute element at the end of the current stacking context as Ryan mentioned.

[RyanReese]

I just added that clear:both; comment but I don't think it will be needed because I put the header (in my code) after the clear:both'd footer.

I just added that clear:both; comment to be thorough

[co.ador]

i have come acrros similar issues with Absolutes positioned elements in IE6.

[Paul O'B]

i have come acrros similar issues with Absolutes positioned elements in IE6.

Same issue and same fixes as shown above.

I also documented this way back in 2004

[co.ador]

I have to put my hands into that thanks.