Internet Explorer: overflow and float

StackOverflow https://stackoverflow.com/questions/1641992

Question

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.

Was it helpful?

Solution

You might try the following for IE 7:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<div style="overflow: hidden; width: 150px; direction: rtl;">
   <img src="yourimage.png" style="float: right" />
</div>
</body>
</html>

The direction: rtl styel works for me in IE 8 using IE 7 Standards mode. IE 8 using IE 8 standards does not need the direction style.

Hopefully this might solve your issue. I'm not sure if it will work with any other content you might have in the div, but it seems to achieve the affect you want with the image.

OTHER TIPS

Worst case: slide a white DIV over the left side of your image? Very cross-platform though.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top