Contact us

Tel: +44 (0) 1224 582948

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.

Next entry: 3 CSS tricks / bugs in Internet Explorer 7

Previous entry: Jeremy Keith talks web accessibility and html5

Comments

Comment: 1
Paul , 3rd June 10

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

Comment: 2
chris , 30th December 10

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

Comment: 3
Matt , 6th January 11

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

Comment: 4
Alex , 9th February 11

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

Comment: 5
Dan , 24th March 11

THANKS! smile

Comment: 6
Jason , 25th March 11

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

Comment: 7
Luis , 5th May 11

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;
}

 

Comment: 8
Karl , 1st June 11

IT WORKS! THANKS! :D

Comment: 9
ArtizanatWeb , 18th October 11

BRILLIANT, brilliant, brilliant—Thank you very much

Comment: 10
julie , 26th October 11

Wow!!  Wasted an hour on this!  THANKS—

Comment: 11
Sebastianz55 , 16th February 12

Works. No idea why.

Thanks. Much.

Comment: 12
Vijayalaxmi , 20th April 12

Awesome!!!!

Comment: 13
David , 14th May 12

Spent HOURS!!!!  Bless you!

Comment: 14
Garrick , 5th July 12

So grateful for this. Stupid IE…

Comment: 15
Jacky , 12th October 12

Thank you for saving me! This was exactly what I needed smile

Comment: 16
Yannick , 6th November 12

Thank you so much! It work very well.

Comment: 17
durgesh , 11th December 12

Simply great solution , i wasted lots of time found nothing solid , it worked magically. Thanks , thank you so much, fan of genius…..

Comment: 18
Erdho , 1st March 13

Hey, well done, this solution works for me too. Cheers mate!

Leave a comment

" What you do not want to happen to you, do not do it yourself either" Sextus the Pythagorean