Forum Moderators: not2easy

Message Too Old, No Replies

horizontal line overlaps floated image in Nestacpe 7.1

horizontal lines and floated images

         

bj75

12:14 am on Oct 25, 2005 (gmt 0)

10+ Year Member



I have a dynamic floated image with dynamic product description to the right of the image. I then have a <hr> line under the text.

The problem im having is that the dynamic image varies in height. When the image is its maximum height of 180 px in Netscape 7.1 the horizontal line will overlap the image if the text description is not long. I want the <hr> line to appear after the image.

In IE 6 the <hr> line automatically makes itself shorter to accomodate for the image.

When I tried adding <hr style="clear: left;"> this fixed the problem in Netscape but then pushed down the remaining content way down the page in IE. I think this is because I have a three column css layout and there is an image floated in the left most column and the clear style attribute is some how seeing the floated image in the leftmost menu column and therfore placing the remaining content after that point.

Quite hard to explain without a live URL but if anyone can help much appreciated

doodlebee

12:18 am on Oct 25, 2005 (gmt 0)

10+ Year Member



got code?

bj75

1:03 am on Oct 25, 2005 (gmt 0)

10+ Year Member



.left {
margin: 0 5px 2px 0;
float: left;
}

Using stict doc type

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<cfoutput><img src="#client.tempimages##random.image#" alt="#random.name#" border="1" class="left" />
<h3>Random Product - #Ucase(random.name)#</cfoutput></h3>
&#8226; <cfoutput>#random.des1#</cfoutput> <br />
&#8226; <cfoutput>#random.des2#</cfoutput> <br />
<cfif #random.des3# NEQ "">&#8226; </cfif><cfoutput>#random.des3#</cfoutput> <br />
<cfif #random.des4# NEQ "">&#8226; </cfif><cfoutput>#random.des4#</cfoutput> <br />
<cfif #random.des5# NEQ "">&#8226; </cfif><cfoutput>#random.des5#</cfoutput> <br /> <strong><cfoutput><a href="product_detail.cfm/hurl/Masterno=#random.masterno#/product_detail.cfm"> For Prices &amp; More Detail &gt;&gt;</a> </strong></cfoutput>
<hr style="clear: left;">

Dont think this is gonna be much help. Im gonna have to try and get something up on a test server but see if you can see anything.Thanks

bj75

1:49 am on Oct 25, 2005 (gmt 0)

10+ Year Member



[seton.net.au...]

Ok heres a test version on server. I want the <hr> line to appear after the image in both ie/Netscape/firefox etc.

Keep refreshing the page and the random product will change and you will see what I mean waht happens in Netscape. When there is a big image with little description the lin overlaps the image.