Wrapping text around image, and borders not working in IE

[timmyneal]

Version 1.3.8a
No addons

I'm using the Define Page Editor to add an image to my define_main_page.php. I got the image loaded OK, but I can't seem to get the text to wrap in IE8. The text does wrap when viewed in Firfox 3.5.3, and Chrome 3.0.195.27. You can see what I mean if you look at www.woodworksbytim.com. I'm using the ALIGN="left" command.

I'm also attempting to place a border around the image using the BORDER command. The border shows up in the define page editor, but not in any browser.

Can anyone help. Thanks.

[schoolboy]

Your site is down for maintenance.

Alert us when you make it live again.

[timmyneal]

Sorry about that. The site is now active. Thanks.

[dbltoe]

Maybe is the second and incorrect border=2

[timmyneal]

I tried removing the border statement entirely, but it had no effect on the problem with the text wrapping around the graphic. I'm not too concerned with the border since I could just make it part of the graphic. I do need to get the text alignment problem fixed. I'm including the snippet of code hoping that someone might spot the problem. This code starts at the very top of the define_main_page.php file. Any help is greatly appreciated. Thanks.

<p><img style="WIDTH: 250px; HEIGHT: 286px" border="0" hspace="4" vspace="4" align="left" src="http://woodworksbytim.com/images/Products/spicebox_FPage.jpg" width="250" height="286" />WoodWorksbyTim produces

[gjh42]

You have put a lot of tag soup in that <img>! You have

<img style="WIDTH: 250px; HEIGHT: 286px" border="0" hspace="8" vspace="4" align="left" src="http://woodworksbytim.com/images/Products/spicebox_FPage.jpg" width="250" height="286" />

when all you really need here is

<img src="images/Products/spicebox_FPage.jpg"  />

If you need to specify the image size, that means you are asking the user's browser to resize your image, and losing quality and taking more bandwidth than necessary. If you just want to hold the size box while the image loads, that is ok but should not really be needed unless the image is huge. In any case, don't specify the width and height twice.

Add to your stylesheet

#indexCategoriesMainContent img {
    float: left;
    margin: 0 4px 8px 0;
    }

This will make images in your define_main_page content move to the left, wrap text, and leave a 4px space to the right and 8px space to the bottom, with top and left having no extra spacing (the <p> already takes care of that).

border="0" will obviously not get you any border; to have any of the standard types of HTML border, add to your stylesheet rule

    border: 2px solid #aabbcc;

using whatever values you want for width, style and color.

[dbltoe]

Glenn's spot on. Be sure you add the css at the end of stylesheet_tm.css.

AND, you need to either resize the image or get image handler involved. 500k+ is a killer.

We each do things differently but the same somehow. When adding a lot of things in a page edited by define pages editor, I always use the html and add IDs/Classess to things even if I don't use them in a stylesheet. I would have added a class for the <p> and <li>. Also, I would have added an id to <img> and <UL>. Then you have complete control through the stylesheet.