Menu
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: [url]http://stores.homestead.com/springcreekrusticoutfitters/-strse-12/rustic-decor-horse-hames/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!
[B][U]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”>
[B][U]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;
}
[B][U]…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