IE Strange Float Problem

[chivalry21]

Hi folks,

Hope you can help me, this is a strange one. I am working on the following website: <snip>

I have 2 products on the front page with a nested div containing the details of these products.

In IE the product on the right hand side breaks the float and puts the "add to basket" image on the next line. e.g. http://www.example.com/acatalog/women_beauty.html

The strange part is that its not consistant. Other pages on the site which have the same code e.g. http://www.example.com/acatalog/baby_care.html don't behave in the same way?

It works a charm in Firefox.

Strangest thing is that when I don't compact the HTML everything works well in both IE and Firefox. It's only when I compact the HTML that this problem occurs?

Pulling my hair out.

Can anyone point me in the right direction?

Thanks!

Andy

[edited by: tedster at 4:09 pm (utc) on Dec. 29, 2008]

[ahmedtheking]

Ie is a bit poo @ css! Can we see some code?

[chivalry21]

Hi,

The CSS can be found here: [charlottenaturals.co.uk...] it's quite a big file at the mo, so it seems silly to replicate on this forum.

The HTML in question?
Again it's a little fussy to repost here because the parts of the code I'm having trouble with only seem to occur in context of the entire page.

[ahmedtheking]

Can you break it down to just the 'add to basket' CSS and HTML code?

[chivalry21]

CSS For Product:
------------------------------------------
.product2 {
margin: 0px 10px 0px 1px;
padding: 0px;
float: left;
width: 217px;
height: 145px;
position: relative;
display: block;
border-top: none;
border-right: none;
border-bottom: 1px solid #FFFFFF;
border-left: none;
}
.productinfo2 {
margin: 0px;
padding: 0px;
float: right;
height: 95px;
width: 137px;
position: relative;
background-color: #FFFFFF;
overflow: hidden;
display: inline;
border: none;
}
.productbuy2 {
margin: 3px 0px 0px;
padding: 0px;
float: right;
width: 137px;
position: relative;
background-color: #FFFFFF;
display: inline;
height: 42px;
font-weight: bold;
overflow: hidden;
border: none;
}
------------------------------------------
productbuy2 is where the Add To Basket image is kept

HTML
------------------------------------------

<div class="centrecontent">
<form method="POST" action="http://www.charlottenaturals.co.uk/cgi-bin/ca000001.pl" >
<INPUT TYPE=HIDDEN NAME="SID" VALUE="21" id="SID">
<INPUT TYPE=HIDDEN NAME="PAGE" VALUE="PRODUCT">
<INPUT TYPE=HIDDEN NAME="PAGEFILENAME" VALUE="best_sellers.html">
<Actinic:SECTION BLOB="A00021.cat"/>
<div class="product2"><div class="productimage"> <a href="/acatalog/info%5f4%5f37%2ehtml" target="_blank" onclick="ShowPopUp(this.href,550,400);return false;"><img src="/acatalog/hfs_total_efa_caps.jpg" alt="The Total EFA x60" /> </a></div><div class="productinfo2"><a name="a4_2137"><span class="actregular"><strong>The Total EFA x60</strong></span></a><span class="actxsmall"> <br/> Ensures you meet your body&#39;s daily essential fatty acid requirements by offering a balanced combination of borage&#44; organic flax and fish oils</span><span class="actxsmall"> <Actinic:PRICE_EXPLANATION PROD_REF="37" COMPONENTID=-1></Actinic:PRICE_EXPLANATION> </span><br/><span class="actxsmall"></span><span class="actxsmall"></span><span class="actxsmall"></span><span class="actxsmall"><input type="hidden" name="Q_4!37" value="1"> </span></div><div class="productbuy2"> <a href="/acatalog/info%5f4%5f37%2ehtml" target="_blank" onclick="ShowPopUp(this.href,550,400);return false;">More Info</a><br /><span class="actxsmall"></span> List: <span class="rrp">£9.60</span>&nbsp;Ours: <span class="ourprice"><Actinic:PRICES PROD_REF="37" RETAIL_PRICE_PROMPT="">&#163;8&#46;95 </Actinic:PRICES></span><br /><Actinic:ACTIONS><input type="image" src="/acatalog/addtobasket.gif" name="4!37" alt="Add To Cart" style="height: 13px; width: 106px;" /></Actinic:ACTIONS> </div></div>
<div class="product2"><div class="productimage"> <a href="/acatalog/info%5f1%5f112%2ehtml" target="_blank" onclick="ShowPopUp(this.href,550,400);return false;"><img src="/acatalog/viola_tricolor.jpg" alt="Viola Tricolor" /> </a></div><div class="productinfo2"><a name="a1_21112"><span class="actregular"><strong>Viola Tricolor</strong></span></a><span class="actxsmall"> <br/> Viola tricolor is the fresh herb tincture of the Wild Pansy&#44; useful for treatment of eczema and skin rashes</span><span class="actxsmall"> <Actinic:PRICE_EXPLANATION PROD_REF="112" COMPONENTID=-1></Actinic:PRICE_EXPLANATION> </span><br/><span class="actxsmall"></span><span class="actxsmall"></span><span class="actxsmall"></span><span class="actxsmall"><input type="hidden" name="Q_1!112" value="1"> </span></div><div class="productbuy2"> <a href="/acatalog/info%5f1%5f112%2ehtml" target="_blank" onclick="ShowPopUp(this.href,550,400);return false;">More Info</a><br /><span class="actxsmall"></span> List: <span class="rrp">£7.99</span>&nbsp;Ours: <span class="ourprice"><Actinic:PRICES PROD_REF="112" RETAIL_PRICE_PROMPT="">&#163;7&#46;50 </Actinic:PRICES></span><br /><Actinic:ACTIONS><input type="image" src="/acatalog/addtobasket.gif" name="1!112" alt="Add To Cart" style="height: 13px; width: 106px;" /></Actinic:ACTIONS></div>
</div>
</form>
<br class="clearboth" />
</div>

------------------------------------------

Thanks!

[chivalry21]

fixed the problem,

containing div was 1px too wide for IE. Simple as that! Crazy.

Thanks anwyay

Andy