Wrapping text around image, and borders not working in IE

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 https://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.

Your site is down for maintenance.

Alert us when you make it live again.

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

Maybe is the second and incorrect border=2

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.

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" />

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.

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.

Yes, I would have added a class/id to the <img> and other elements myself, but didn't see the need to introduce that bit of complexity to this simple problem.

Guess it's the teacher in me.:smartalec:

Thanks. You guys are great! I took your advice and reduced the image file size to the dimensions I wanted on the page, remove the code for size, and added the basic stylesheet entries you suggested. Text wrapping and border works just find now. I was even able to figure out how to change the link attributes so they no longer show up as hard to read light-grey.

I also want to change the default color for bulleted lists, but I have not been able to identify the code in the stylesheet. Can you clue me in? Thanks.

Glad you got it working.:clap:

You could change the <ul> code to something like <ul id="mainUL"> and add a #main ul {color: #000000} to the stylesheet at the end. You can then change the #000000 to whatever color you like.

Err, teacher... #mainUL {color: #000000;}

:smartalec:

You lost me...I'm pretty good with wood, lousy with web development. I added #mainUL {color: #000000;} to the bottom of the stylesheet. Where do I change the **<ul> code to <ul id="mainUL"> **

I have another question on text wrapping around images. Is it possible to force the Category text to start at the top of the Category Image, then wrap around like we did on the main page? Let me know if I should open another thread for this.

Thank you.

Dbltoe is referring to the <ul> you have in define_main_page.php, in the Define Page Editor.

For the other category image, add to your stylesheet_tm.css```
#categoryImgListing {
width: 74px;
float: left;
margin: 2px 8px 8px 0;
}

gjh42:

Err, teacher... #mainUL {color: #000000;}

:smartalec:
:shocking:Can I claim Secondary Post Traumatic Syndrome on that one?

Tim,
What you've done will work. We just don't normally hard code colors.

You can start a new thread, but be ready for the negative TM feedback. Most folks here don't appreciate having to clean up their messes. They have put things in different divs and you would need to modify the correct tpl page under templates. Who knows which they might have used. They may have done something like I did above:wacko:

OK. That worked great also. I think I'm done for now. Thanks for all your help.

Tim