CSS, Div, Image and text wrapping problem

Text wrapping images isnt being displayed correctly

[Dn100]

Hi everyone,

I am new here to these boards (new registered user anyway), and i was wondering whether anyone could help me out with a annoying problem i cannot seem to resolve!

Ive been altering my website lately and have added additional boxes onto a particular page and put in an image (product) and text (product description). I am using dreamweaver and i am fairly ok code, but still learning!

Anyway, i aligned the image to the left and in dw and ie8 it all looks ok. In other versions of ie (such as 5/6/7) the text is pushed downwards. I have messed all day with CSS and tags etc and cannot figure out how to fix this.

The page address is a test page currently so not live, but can be found at <snip>

There are 3 product boxes at the top underneath the banner. Screenshots are available at same url - /_images/1.jpg and /_images/2.jpg

Can anyone help?

[edited by: swa66 at 5:39 pm (utc) on June 8, 2009]
[edit reason] No personal URLs please. See ToS and forum charter. [/edit]

[swa66]

Some minimal code would be helpful to understand what you're doing.
(we don't do URLs nor images)

In all likelihood some conditional comments could correct this as well.

[Dn100]

Sorry, and thanks for responding.

Within my CSS a box is created with the following style:

.content ul.features1 { float:left; width:425px; padding: 2px 0px 0px 0px;} 
.content ul.features1 li { float:left; width:420px; display:inline; padding:0px 20px 0px 0px; background:none; list-style-type:none;} 
.features1 li.even { padding:0px 0px 10px 0px;}
.features1 li div { width:420px; padding:15px 0px 0px 13px; border:1px solid #b0b1b2; float:left;}
.features1 p { color:#566065; padding-right:0px; padding-bottom:0px; width:410px;}
.features1 li h3 { padding-bottom:12px;}

Then on the page, i have the following code,

<ul class="features1">
 <li class="even">
 <div>
<h2 class="header-home"><span style="font-weight:bold; font-size:15px; color:#FF0000;"><img class="freesat" src="../_images/general/FREESATSD.jpg" alt="Freesat SD Satellite System" width="135" height="127" align="left"/></span><span style="font-weight:bold; font-size:15px;"><span style="font-size: 18px">Freesat SD</span></span><br />
 <span style="font-weight:bold; ; font-size: 85%">No Monthly Subscriptions</span></h2>
 <p>- 140 Free Digital Channels (200 by 2010)<br />
 - Interactive Channel Guide &amp; Services<br />
 - BBC iPlayer Integration (2009/10)<br />
 - <span style="font-weight: bold">Full System Installation</span><span style="color: #F10581; font-weight: bold; font-size: 115%"> From Only &pound;165!</span><br />
 <a href="http://www.example.com/"><span style="font-weight:bold; ; font-size: 100%">- Click Here - Book A Free Estimate</span></a></p>
 </div>
 </li>

The text after the image in dw and in ie8 displays ok, with it wrapped as hoped. However, when i turn off ie8 compatibility mode, or view in other versions of ie, the text wrap is wrong with half appearing next to the bottom right corner of the image, and the rest underneath.

[edited by: swa66 at 10:41 pm (utc) on June 8, 2009]
[edit reason] Use example.com, it cannot be owned [/edit]