Search this website:


Absolute DIV not showing in IE6 / IE7 - Internet Explorer

Iv come across this problem a few times now and this should be of help to a few people.

When placing an absolute div within a relative positioned div, in IE6 and IE7 that div disappeared. The content within the div and the div just would not show. An immediate response would be to think of the stack and z-Index but after a few tests it wasnt that.

The Fix: Simply surround the absolute div with another empty div.

Did it work? Another similar problem? Leave a comment.

Comments

This solved my problem. Thanks a lot! Any idea why an extra div is needed?

By Paul on 16th December 2010

Thanks a bunch for this.  You saved me a lot more wasted time.  I waste more time finding IE workarounds.

By chris on 30th December 2010

Wow I can’t believe that was so simple to fix! Thanks a lot, you saved me ripping my hair out for the next 6 hours

By Matt on 6th January 2011

This helped me as well, it worked ! Thanks for posting.

By Alex on 9th February 2011

THANKS! smile

By Dan on 24th March 2011

  You just answered a question I had been working on for DAYS! THANKYOU!!!

By Jason on 25th March 2011

It did not work for me, can you give me advice?

This is what i did and it did not work.
<div>
<div id=“buttontop1”></div>
</div>

Here is the info:

The header.php code:

<!—Begin Custom Header Buttons and phone—> 
       
<div id=“buttontop1”></div>

<div id=“buttontop2”> </div>


<!—end Custom Header Buttons and phone—> 

The CSS code :

#buttontop1{
  position: absolute;
  z-index: 99;
  height: 74px;
  width: 206px;
  top: 86px;
  right: 13px;
}
#buttontop2 {
  position: absolute;
  z-index: 100;
  height: 74px;
  width: 214px;
  top: 86px;
  right: 228px;
}
#tel {
  position: absolute;
  z-index: 10;
  top: 18px;
  right: 0px;
  color: #FFF;
  width: 400px;
  height: 50px;
  font: bold 50px/normal Arial, Helvetica, sans-serif;
}

 

By Luis on 5th May 2011

IT WORKS! THANKS! :D

By Karl on 1st June 2011

BRILLIANT, brilliant, brilliant—Thank you very much

By ArtizanatWeb on 18th October 2011

Wow!!  Wasted an hour on this!  THANKS—

By julie on 26th October 2011

Works. No idea why.

Thanks. Much.

By Sebastianz55 on 16th February 2012

Comment Form:

< Back to view all blog entries
  • 22nd February 2012 Silly amount of traffic on Media Surgery last few days since featured on the hugely popular @cssmania showcase site, humbled to be listed!
  • 17th February 2012 Looks like a windows person designed the new windows logo.
  • 14th February 2012 Reading that HFJ web fonts are coming. Looking forward to that !
  • 12th February 2012 Awesome jquery slider!... Ladies and Gentlemen Meet Flux - http://t.co/Bfw5cIJY Flash like coolness!
  • 4th February 2012 Very cool - http://t.co/tjrZy1Wt Load this site up and start moving your mouse in the grey area right / left of content
  • 31st January 2012 Interesting article about the problems with responsive images - http://t.co/XzXykBhg - ALA - detecting connection speed - we can but dream
  • 31st January 2012 Spectacular web design tool for testing in Internet Explorer and checking caches etc - http://t.co/FJZHz2iT
  • 25th January 2012 Apple win the world by DHH ( 37 signals ) - http://t.co/8JxkcANj - Interesting (not unexpected) comments - Either love or hate! - we love
  • 24th January 2012 Very well designed site http://t.co/GG1wQaQs BRP
  • 23rd January 2012 @malarkey Re 320 and up : Is it simply media queries that stop mobiles loading in assets in larger sized statements?
@mediasurgery