Time and over again, When all the other browsers seen to behave as told by the w3c rules , IE spirals you out of the development spirit by throwing a tantrum, that doesn’t seem to have a fix . Just such a one is this issue in IE7.
Problem Statement:
I and so might many of the other serious web developers have noticed more than many a times , that when there nested floats in the layout, on hover over some links ( anchor tags) , the containing container seems to shift a few pixels to the right. I have tried to google solutions for this issue , but have hardly found any reasonable answer to why and when it occurs ( that might help to prevent this issue from happening) , hence I have never found a clear solution to the problem either…
Possible Solution :
Out of experience , I have notice 90% percent of the times i.e. , that this issue is fixed by adding a zoom property in the CSS definition of the mis-behaving container …
#somediv {
zoom: 1 ;
}
again the reasons are ambiguous … try this …
Some elements in IE have a “hasLayout” property , which is “true” by default. Many visual CSS behaviors ; for example, an alpha filter only works on an element that hasLayout. and the {Zoom:1} seems to give the target elements the hasLayout property…. USeful? I dont think so…
The zoom property is also seems to supported by Chrome , but its use dint seem to make much adverse effect on my layout… try it, If it works for you … if it doesn’t, bookmark this page under “CSS craps”
