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
16 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.
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 ;)
Post a Comment
<< Home