I'm having an issue regarding my images aligning vertically instead of horizontally in Mozilla & Chrome browsers. Works fine in IE8 but haven't tested the other browsers yet. I suspect it has something to do with the float elements, but I can't figure out for the life of me how to fix it. I'm using a generic pre-designed template from Homestead/Intuit which I have pretty much redesigned to my own liking. I added a vertical accordion menu using css & jquery but ever since then, I've had trouble with my images aligning vertically instead of horizontally only in my Product Detail pages. You can get a good idea of the problem here: http://stores.homestead.com/springcr...mes/Detail.bok.

If anyone has any ideas or suggestions I sure would appreciate it. I don't know much about floats or css. I'm just a do-it-yourselfer trying to learn. I know...EEEK! RUN FOR THE HILLS!

DOCTYPE information on my Header Page:


Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
      
<html xmlns:og="http://ogp.me/ns#"
      xmlns:fb="http://www.facebook.com/2008/fbml">
Here is the css portion of code on my Stylesheet Base page:

Code:
/****** MULTIPLE IMAGES ****** product detail page */
.click {cursor:pointer}
.imagesmallcontainer {
        background-color:#ffffff;
	border:2px solid #CCCCCC;
	float:left;
	height:65px;
	margin:8px 4px 2px 0px;
	overflow:hidden;
	width:65px
}
.hoverover {
	float:left;
	font-size:11px;
	padding-bottom:2px;
	padding-top:2px;
	width:300px
}
.notavailable {
	background-color:#ffffff;
	border:1px solid #cccccc;
	color:#666666;
	padding:10px;
	text-align:center;
}
...and the html portion on my Product Detail page:

Code:
[<table border="0" cellspacing="0" cellpadding="20">
	<tr>
		<td valign="top">
		<ss:if test="$product.defaultImage"> 
		    <table border="0" cellspacing="0" cellpadding="0" id="imgtable" rules="none">
				<tr>
					<td valign="bottom" width="100%" height="100%" id="divMediumContainer">
	             		<ss:set name="item" value="$product.defaultImage"/>
		
						<ss:if test="$item.hasMediumSize()">
								<ss:set name="urlMedium" value="$item.medium"/>
						<ss:else/>
								<ss:set name="urlMedium" value="$item.small"/>
						</ss:if>
			
            			<ss:image id="imgMedium" source="$urlMedium" title="$item.title" class="click"/>	     
                 	</td>
				</tr>
			</table>
			
			<br />
	    
			<ss:foreach item="productMedia" within="$product.images">
				<ss:if test="$counter.totalRows > 1">
					<ss:set name="item" value="$productMedia.storeMediaItem"/>
					<ss:if test="$item.hasSmallSize()">
						<div id="$system.concat('divSmallImage_', $counter.currentRow)" class="imagesmallcontainer">
							<ss:image id="$system.concat('imgSmall_', $counter.currentRow)" source="$item.getImage('small')" calcoffset="65"/>
						</div>
				        <ss:if test="$counter.isLast">
							<div class="hoverover">
								<ss:image source="$storeVersion.images['hoverOver.gif']"/>
							</div>	
						</ss:if>
					</ss:if>
				</ss:if>
			</ss:foreach>
		<ss:else/>
			<div class="notavailable">
				<div style="padding:50px">Photo Not Available</div>
			</div>
		</ss:if>
	</td>
Thanks in advance for any help. I'm about ready to just give it all up...

Marcy