Issues with images aligning vertically instead of horizontally in Mozilla & Chrome

**mnorwood** · 02-07-2013, 02:14 PM

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

**theyoker** · 02-12-2013, 07:02 PM

If you want them to be displayed horizontally. So that you'll have the thumbnails like.

PIC1,PIC2,PIC3,PIC4

Code:

.hoverover {
	float:left;
	font-size:11px;
	padding-bottom:2px;
	padding-top:2px;
	width:300px;
        display: inline;

}

But if you want them to remain vertical like they are, but without the text over them. You'll need to read this
http://www.w3schools.com/css/css_pos...p?output=print

Just using the inspect element on chrome I notice that the image part only has a 295x300px. If you want the thumbs to be displayed vertical without the overlapping just make the size of the height larger.

According to chrome you should be looking for the CSS called common-container and not hoverover if you want the thumbs to remain vertical.But the code above should work if you want them horizontal.

Thread: Issues with images aligning vertically instead of horizontally in Mozilla & Chrome

Thread Tools

Display

Issues with images aligning vertically instead of horizontally in Mozilla & Chrome

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions