Element not displaying correctly in FF.

[PushCode]

Okay, I know it's probably incorrectly coded, which is why it's not displaying in FF correctly, whereas it is displayed correctly in IE 6 and IE 7.

If you visit the following URL in Firefox:

http://www.drtodds.com/footcareproducts/index.cfm

...you'll notice that the product display area has a horizontal scroll bar. That's not supposed to be there! It's being caused by my placement of an <hr> tag. If you look at the page in an IE browser, you can see what it's supposed to look like.

Essentially, the page is dynamically displaying products. 3 per row. Between each row I have this <hr class="horiz_div" /> tag. Here's the html/code:

<div class="prod_row">
		  	<cfoutput query="get_prod_by_subcat">
			<cfset tcount = Len(get_prod_by_subcat.prod_name)>
		    <div class="prod_col">
			<a href="prod_detail.cfm?pid=#get_prod_by_subcat.product_id#"><cfif get_prod_by_subcat.img_full neq ''><img src="../assets/img/products/thumb/#get_prod_by_subcat.img_full#" alt="#get_prod_by_subcat.prod_name#" border="0" style="text-align:center;" /><cfelse><img src="../assets/img/products/no_pic100.gif" alt="#get_prod_by_subcat.prod_name# - No image available" border="0" style="text-align:center;" /></cfif></a><br />
			<span class="medgrey"><a href="prod_detail.cfm?pid=#get_prod_by_subcat.product_id#">#get_prod_by_subcat.prod_name#</a></span><cfif tcount LT 30><br /></cfif><br />
			<span class="litegrey">#left(get_prod_by_subcat.description, 65)#...</span><br />
			<span class="medgrey" style="font-size:11px;"><a href="prod_detail.cfm?pid=#get_prod_by_subcat.product_id#">More...</a></span><br />
			<cfif get_prod_by_subcat.item_number neq ''><span class="medgrey" style="font-size:11px;"><a href="prod_detail.cfm?pid=#get_prod_by_subcat.product_id#">Item ##: #get_prod_by_subcat.item_number#</a></span><br /></cfif><br />
			<cfif get_prod_by_subcat.special EQ 1><span class="sale_price" style="font-weight:bold;">Sale Price: #dollarformat(get_prod_by_subcat.sale_price)#</span><br /><span class="price" style="font-weight:bold;">Our Price: <del>#dollarformat(get_prod_by_subcat.price)#</del></span><cfelse><span class="price" style="font-weight:bold;">Our Price: #dollarformat(get_prod_by_subcat.price)#</span></cfif><br />
			<span class="medgrey"><a href="prod_detail.cfm?pid=#get_prod_by_subcat.product_id#">More...</a></span>
			<cfif get_prod_by_subcat.thequant neq '' and get_prod_by_subcat.multiprice neq ''><br /><span class="blue_txt">Or Get: #get_prod_by_subcat.thequant# for #dollarformat(get_prod_by_subcat.multiprice)#</span></cfif>
			</div>
			<cfif CurrentRow MOD 3 EQ 1 OR CurrentRow MOD 3 EQ 2><div class="prod_div"><img src="../assets/img/prod_div.gif" height="118" width="1" /></div></cfif>
		  <cfif CurrentRow MOD 3 EQ 0></div><cfif NOT CurrentRow eq prodcount><hr class="horiz_div" /></cfif><div class="prod_row"></cfif>
		  </cfoutput>
		  </div>

Here's the relevant CSS:

.prod_row {
	width:628px;
	vertical-align:bottom;
}
.prod_col {
	width:140px;
	padding:0 14px 0 14px;
	float:left;
	font-size:11px;
	vertical-align:bottom;
}
.prod_div {
	width:1px;
	float:left;
	vertical-align:bottom;
	padding:55px 40px 0 0;
}
.horiz_div {
	margin:7px 0 7px 0;
	height:1px;
	width:95%;
	color:#CCCCCC;
	text-align:center;
}

Any help would be great. Thanks!

 

[feherke]

Hi

Yes, that is rendered correctly. It is because the [tt]float[/tt]ing. If you want the [tt]hr[/tt] to be moved under the [tt]float[/tt]ed content, break the [tt]float[/tt]ing at the [tt]hr[/tt].

.horiz_div {
    margin:7px 0 7px 0;
    height:1px;
    width:95%;
    color:#CCCCCC;
    text-align:center;
    [red]clear:both;[/red]
}

Feherke.

http://rootshell.be/~feherke/

 

[PushCode]

Thanks Feherke, that appears to have solved the problem. A new issue I now see is that there is no space on top or bottom of the hr. Any idea how I accomplish that? The margin settings seem to do the trick in IE.

Thanks!