Archive for November, 2009

CSS ZOOM – Yet Another IE quirk; The 3 pixel shift

Saturday, November 7th, 2009 By Nikhil

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”

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter