Search code examples
cssinternet-explorerfckeditor

Img align:left causes text overflow in IE

I'm having an issue with text overflowing within a column when an inline image is aligned left or right. Its hard to describe so I created an example page at http://alaskalegion.com/dev/test.php

This only occurs in IE6 and IE7. Any thoughts on how to fix this?

I'm using fckeditor on the backend which is generating these.

Solution

  • You need to make sure the p tag wraps around the image so that other paragraphs are above and below it. I can´t test it right now, but I usually use overflow:hidden on the surrounding block (the paragraph) and I think for IE you need something like zoom:1.

    By the way, can´t you get rid of the inline 'align:left' and replace it by css in an external style sheet like:

    #center-column p img {
    float: none;       // if still necessary...
}
#wide_column p img {     // I don´t know what the id of the wide column is...
    float: left;
}

    (I don´t know if you need the p selector, I'm only trying to target the right images without seeing your code)