Hi folks,
I have an img inside a div. I have set the img to "float: right", and the div to "overflow: hidden". Because the div is narrower than the img, I expect the left portion of the img to be cut off and hidden, which is indeed the case in Firefox. However, IE refuses to acknowledge the "float: right" property of the img, always anchoring the img to the left side of the div and cutting off the right portion of the img. Is there a workaround for this problem? Or am I doing something wrong?
**background info
The reason I want to do this is because I want the img to appear with jquery's "blind" effect (from left to right), and then disappear with a similar blind effect (again, from left to right).
jquery's default blind effect does not handle the disappearing from left to right. I am guessing that the reason for this is that certain mode (hide vs. show) and certain direction (left vs right or top vs bottom) combinations require an additional movement of the top-left position of the div. Let me demonstrate with an example. Suppose we want to make an image appear from left to right with the blind effect. Well, this is simple, we just set the div overflow to hidden, the image to float left, then change the width of the div from 0 to the width of the image. On the other hand, if we now want to make the image disappear from left to right with the blind effect, we have to set the image to float right, and shrink the width of the div from the image width to 0, while nudging the div's top-left corner to the right, in order to keep the image's right edge stationary.
I've written up code to incorporate the top-left corner movements, and it works fine in FF, but fails in IE. Because IE won't respect the float:right and instead insists on anchoring the image to the left, the effect is that of jquery's "slide" instead of the "blind" animation.