Elements stack, but unstack when hovered?

Question

Basically my problem is sometimes, divs, spans, will float on top of ecahother. But when I move my mouse over them they "unstack" and correct themselves, and they will stay fixed until I refresh the page... then they are broken again. It's as if the action of hovering over them does something to it?

Does anyone know why this kind of behavior occurs? This ie IE6 and IE7 btw. I'm not sure if it has to do with hasLayout (since they do have layout I into them). Anyone else seen this quirk before?

Sorry I don't have any sample code since I can't reproduce it in simple code -- my site is quite a complexity of nested divs.

Answer 1

do you have position:relative somewhere in your code? if you do, check this post: http://nirlevy.blogspot.com/2008/08/misplaced-elements-with.html

Answer 2

Hi

This problem sometimes comes due to usage of "position:absolute" in css and not wrapping it properly with "position:relative" tags. If you use the above codes check which position tags in css.

It would be helpful if you provide a link of your project [or] the simple html code and css used, So that we can inspect and come up with the solution.

Answer 3

I've seen what you're talking about more than once. My understanding of the bug is that on IE's first rendering of the page, it doesn't always know the dimensions of elements and so guesses at where they should go.

When you trigger a :hover, the page is reflowed and since everything is now rendered, IE has a better idea of element dimensions. This causes it to shift elements around to their correct position.

I've had good luck fixing it by adding borders to all preceding elements and seeing which one moves around and then making sure hasLayout is triggered on it with the height: 1% or zoom: 1 fix.

I even had a case where italics caused it since italic text gives IE grief.

Answer 4

Sounds like [http://www.positioniseverything.net/explorer/peekaboo.html "Peekaboo bug"] to me...