Monday, March 7, 2011

IE not wrapping text around images

I have a page with this HTML:

<p>
    <img src="images/ih01.jpg" width="80" height="110" align="left" />
    This course overs basic human anatomy and physiology, including the major
    body systems and their functions. When you have completed this course you
    will be able to identify major body components and their core physiological
    functions.
</p>

And this is how it displays in Firefox 3, Chrome 1.0 and IE7: (Click for full size)

You can see that IE is not wrapping the text around the image even though it's aligned left. Any ideas?

From stackoverflow
  • Use:

    <img src="images/ih01.jpg" style="float: left; height: 110px; width: 80px; " >
    

    instead of align. The align attribute is deprecated.

    nickf : Man, I never knew IE7 stopped supporting align. Cheers.
    Triptych : You beat me by like 2 seconds.
  • First off, "align" is deprecated. You'll want to use the CSS float property here.

    <p>
        <img src="images/ih01.jpg" style="float:left;height:110px;width:80px" />    
        This course overs basic human anatomy and physiology, including the major
        body systems and their functions. When you have completed this course you
        will be able to identify major body components and their core physiological
        functions.
    </p>
    

    It's time to take a "time out" to learn about floats!

    nickf : hehe I know about floats and CSS - this is code from our CMS that a non techie created with a WYSIWYG, and I was hoping to be able to avoid re-writing all that code!
    alex : Ahh my old friend the WYSIWYG editor...
    Dave Markle : Ah, WYSIWYG web editing in the days before DIVs and CSS. Got to love it.
    recursive : If the align attribute is the only problem, you can probably fix it with a search/replace.

0 comments:

Post a Comment