IE6 OR IE7 Position Absolute not showing
I don't know why, but for some reason in IE6 or IE7 if there is a floated layout and you have an absolute-positioned div in the mix sometimes it just won't show up. I played with the developer toolbar and if I edit any CSS property in the tool, the div magically shows up, but if I implement all the CSS in the stylesheet then reload the page it won't show up.
If you wrap your absolutely positioned element in an arbitrary div (we gave ours a class of 'positionFix') that ISN'T FLOATED, the absolutely positioned element should magically reappear.
This assumes that you have already made sure that any wrappers around the absolutely positioned element are either relatively positioned or absolutely positioned (that is a freshman-level mistake)
I'm only documenting this here so other lost souls don't spend so much time searching Google fruitlessly.
If you wrap your absolutely positioned element in an arbitrary div (we gave ours a class of 'positionFix') that ISN'T FLOATED, the absolutely positioned element should magically reappear.
This assumes that you have already made sure that any wrappers around the absolutely positioned element are either relatively positioned or absolutely positioned (that is a freshman-level mistake)
I'm only documenting this here so other lost souls don't spend so much time searching Google fruitlessly.
Labels: bug, css, float, ie is from the Devil, IE6, IE7, layout, position absolute
posted by John Daharsh at 4:50 PM
37 Comments:
I got the div to show up by wrapping it in another div. However, it displays it about 100 - 150 pixels lower than it should.
This did it. I can't believe it. I used fixed, relatives, floats, all kinds of method to try to make this thing pop up because it just disappear and reappear while I browse through the design.
I <3 you.
Thank you for this tip, the oddity is that the absolute positioned div will show up on some pages but not others. Wrapping in an IDless div tag now places the absolute div on all pages.
I've used an empty relatively positioned div BEFORE a absolute positioned div before to get correct positioning in IE, but this method of wrapping just worked with wrong positioning and disappearing, just as you described in IE for me. Thank you very much.
Hmm, I just ran into this for the first time as well. While the div wrapping works, we need to see what the actual cause of this is. Tempted as I am to say Haslayout, abso-po'd and floated thingies already have Layout so... it's something else. Came up second hit on Google, thanks.
Much thanks for this simple solution. I thought it might stem from hasLayout and be similar to the Peek-a-boo bug, but when "zoom:1" didn't resolve it, I was out of ideas. One redundant div added and the problem goes away...
Worked like a charm!
Thanks.
Thanks for this fix
Thanks man,
stoopid IE.
I have never me you...but I would just french kiss the hell out of you!
Thanks a ton, this has been driving me batty for an hour!!!
Well hot damn. I still can't believe dumb solutions like this actually work. Just goes to show you just how bad IE6 really is. ::sigh::
I am ridiculously happy you posted this. THANK YOU.
Thanks so much for sharing this!
I implemented using conditional comments to protect other browsers from the arbitrary div.
thank you so much! this did solve the problem for me.
Well I'll be damned!
I am glad I ran across this page because I am sure this strange as hell issue would have taken me ages to figure out otherwise.
Damn you IE6 and your strange quirks!
Thanks for this
great post... thanks...
Found you in google search
Its the same in IE 8...
spot on! Been a recurring problem for a while. Great find. Works here for IE 6/7/8 ;)
Thanks man, it helped me!
I had this problem with content disappearing due to absolute positioning. I tried everything to fix it. When I added an extra div around the absolute-ly positioned div, it worked. This is actually a hack for a z-index problem that I was having. Alas, IE6 won't cha pls go away
It sure worked as a charm!
Many thanks!!
you've made my day, just before the deadline. if all solutions were that simple :-)
Wow, just tried this and it worked like a charm! Thanks for the info!
THANK YOU! That is the most asinine thing I have ever seen. I use Absolute Positioned divs all the time to place my logo in the right spot and have NEVER had this problem before. All the sudden out of the clear blue, it pops up.
The div would show up sometimes randomly and most times it would not. Just wrapping a blank div around it did the trick. I HATE YOU IE!
Perfect. Solved the last IE bug I hopefully will ever have to! Thank you.
Absolute legend, this worked perfectly. I was just at the pulling my hair out stage when I found this post!
Wow. It really worked. I cant explain why/how, but thanks.
You saved my live dear sir.
Been going nuts over this problem for 3 hours +
Again, many thanks for posting this solution... saved my skin!
Simply wrap the element with:
class="positionFix"
You are my HERO
Thank you thank you thank you. Man I hate IE.
This is unbelievable. I just wrapped a 4 month project and got the pleasure of doing IE7 testing today. This one was driving me bonkers. Kudos mate.
Glorious find, was looking for this for a while, such a simple fix!!
Thanks. You are a life saver :)
You Rock Man!
Wow, I never comment on blogs, but this saved me some real time. Thanks so much!
I really need to thank you for this.
My God, THANK YOU SO MUCH !
IE7 is a nightmare...
Post a Comment
<< Home