I am having some trouble with setting max-width for images in IE8. The following is my CSS code: .forumimage {max-width:600px; height:auto; width:auto;} Code (markup): In Firefox, this works perfectly. However, in IE8 the parent container is stretched to the original image size (not 600px), but the image is actually resized to 600px as requested. How can I stop the parent being stretched to the original image size? Is this a know bug? Thank you for your help.
Does this include my container stretching problem? As I said, IE8 resizes the image to 600px wide correctly, it's just that the parent container is left at the original image size. Any ideas?
Without actually seeing the rest of your code my guess would be it is a problem with the parent div itself. Try setting a max-width on the parent div and adding overflow:hidden; to it as well.
The parent container is a table set at 100%. Maybe I should set the table as "Fixed" in CSS? Is it possible to set it as fixed with a percent size?
<Jamie>Well there's your problem...</Jamie> Sounds like you are using tables for layout then - which you shouldn't be... at which point it sounds like you've got MUCH bigger code issues than one table's behavior. But again, without seeing the ENTIRE page live, anything we say is going to be a wild guess - you're in "and this is why we can't help you" territory.
I have the same problem, but not with an image, but with a long text containing no spaces, which IE should wrap to the given max-width. As you can see in this fiddle, the result is like this: IE wraps the text but leaves some empty large space to the right of the text: http://jsfiddle.net/L9h4a/2/ Also when trying to apply the same CSS to the parent TD: http://jsfiddle.net/L9h4a/ Finally, the only solution which seems to work is to set not only the max-width but also the width: http://jsfiddle.net/L9h4a/3/ But of course the disadvantage is that the column will never be less than the given width, even if the content width is less than the given column width.