Thread: ie / firefox diffs, arrrgg

I am trying to learn the kits and am using a kit on a product (product.kitproduct.xml.config). Unfortunately, when there are multiple alternate images ie and firefox display them very differently.

The is displays them horizonatally, where firefox displays them vertically. I dont know which is proper, but the horizontal method blows up the form so that is wraps under everything else in the template.aspx

I would rather not have to modify the script (dont know how), so is there a simple fix for this variation??

Press

Here is the list of images that the code returns:
div align="center">
<script type="text/javascript">
<script type="text/javascript">
<div id="divProductPicZ1483" style="display:none"> </div>
<div id="divProductPic1483">
<br>
<br>
<img border="0" src="images/PRODUCT/icon/1483_1_.jpg" alt="Show Picture 1" onclick="setcolorpicidx_1483(1);" style="cursor:hand;cursorointer;">
<img border="0" src="images/PRODUCT/icon/1483_2_.jpg" alt="Show Picture 2" onclick="setcolorpicidx_1483(2);" style="cursor:hand;cursorointer;">
<img border="0" src="images/PRODUCT/icon/1483_3_.jpg" alt="Show Picture 3" onclick="setcolorpicidx_1483(3);" style="cursor:hand;cursorointer;">
<img border="0" src="images/PRODUCT/icon/1483_4_.jpg" alt="Show Picture 4" onclick="setcolorpicidx_1483(4);" style="cursor:hand;cursorointer;">
<img border="0" src="images/PRODUCT/icon/1483_5_.jpg" alt="Show Picture 5" onclick="setcolorpicidx_1483(5);" style="cursor:hand;cursorointer;">
<img border="0" src="images/PRODUCT/icon/1483_6_.jpg" alt="Show Picture 6" onclick="setcolorpicidx_1483(6);" style="cursor:hand;cursorointer;">
<img border="0" src="images/PRODUCT/icon/1483_7_.jpg" alt="Show Picture 7" onclick="setcolorpicidx_1483(7);" style="cursor:hand;cursorointer;">
<img border="0" src="images/PRODUCT/icon/1483_8_.jpg" alt="Show Picture 8" onclick="setcolorpicidx_1483(8);" style="cursor:hand;cursorointer;">
<br>
<img width="1" height="4" border="0" src="images/spacer.gif">
<br>
<div align="center">
<br>
</div>

So there is nothing to make it wrap or not. firefox lays them out top to bottom, ie left to right.

Press

I tried to force the table be 700px, but it is ignored in ie, but firefox does force the table smaller. Any ideas?

<div id="bodyWrapper">
<div id="ML">
<div id="leftWrap">
<div id="content">
<table width="700" cellspacing="4" cellpadding="0" border="0">
<tbody>
</table>
<hr size="1" color="#666666">
<br clear="all">
<script type="text/javascript">
<span id="KitPrice_1483">
<script type="text/javascript">
<form action="p-1483-set-77.aspx" enctype="multipart/form-data" method="post">
<div>
</div>
</div>

Could be the way IE renders the images. You could always try playing around with width adn floating etc

Example


list-style-type: none;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;

i dont know if this was the elegant solution, but i changed the td width from 40% to 451. That is supposed to be 3 times the 150px width of the medium images.

So, not only does it not wrap around, but both ie and firefox have a grid of sub-images for kits. I would have settled for one column, but that made the page really tall. So there are now two rows of three images, with the last two images together right below.


...from product.kitproduct.xml.config
<table border="0" cellpadding="0" cellspacing="4" width="100%">

<tr>
<td align="center" valign="top" width="451">
<xsl:value-of select="aspdnsf:LookupProductImage(ProductID, ImageFilenameOverride, SKU, 'medium', 1, $AltText)" disable-output-escaping="yes"/>
</td>
<td align="left" valign="top" >
<table border="0" cellpadding="0" cellspacing="0" width="100%">.