Tengo en un contenedor unas imagenes, que las traigo de una sesion, pero me las muestra mal, no me las muestra completas, quiero saber como hacerle para que me las muestre en forma completa sin tener que modificar cada una de ellas ya que son muchas, mando el codigo:
<style type="text/css">
#shoppingbag {
position: relative;
background-color: #e2e2e2;
width: 750px;
height: 95px;
}
#shoppingbag #header {
background-repeat: no-repeat;
position: absolute;
width: 104px;
height: 10px;
top: 7px;
left: 630px;
}
#shoppingbag #checkout {
background-repeat: no-repeat;
display: block;
width: 72px;
height: 19px;
position: absolute;
top: 72px;
left: 666px;
}
#shoppingbag #editlink {
font-family: Arial, Sans-Serif;
font-size: 11px;
font-weight: bold;
color: #6699cc;
text-decoration: none;
position: absolute;
top: 75px;
left: 630px;
}
#shoppingbag .outercorner {
position: absolute;
width: 5px;
height: 5px;
background-repeat: no-repeat;
}
/* bottom and right doesn't work reliably in IE5 or IE6 pc */
#shoppingbag #oul { top: 0px; left: 0px; }
#shoppingbag #our { top: 0px; left: 745px; }
#shoppingbag #obl { top: 90px; left: 0px; }
#shoppingbag #obr { top: 90px; left: 745px; }
#shoppingbag #arrowdiv {
background-color: #cccccc;
position: absolute;
width: 615px;
height: 83px;
top: 6px;
left: 6px;
}
#shoppingbag .innercorner {
position: absolute;
width: 5px;
height: 5px;
background-repeat: no-repeat;
}
#shoppingbag #iul { top: 0px; left: 0px; }
#shoppingbag #iur { top: 0px; left: 610px; }
#shoppingbag #ibl { top: 78px; left: 0px; }
#shoppingbag #ibr { top: 78px; left: 610px; }
#shoppingbag .arrow, #shoppingbag .arrowdisabled{
display: block;
background-repeat: no-repeat;
background-position: center center;
position: absolute;
width: 20px;
height: 75px;
top: 4px;
}
#shoppingbag .arrowleft{
display: block;
position: absolute;
width: 14px;
height: 73px;
top: 4px;
}
#shoppingbag .arrowleftnoclick{
display: block;
position: absolute;
width: 14px;
height: 73px;
top: 4px;
cursor: default;
}
#shoppingbag .arrowright{
display: block;
position: absolute;
width: 14px;
height: 73px;
left: 600px;
top: 4px;
}
#shoppingbag .arrowrightnoclick{
display: block;
position: absolute;
width: 14px;
height: 73px;
left: 600px;
top: 4px;
cursor: default;
}
#shoppingbag .arrowdisabled{
display: none;
}
#shoppingbag #scrollWindowDiv {
background-color: #e2e2e2;
width: 571px;
height: 74px;
overflow: hidden;
position: absolute;
top: 4px;
left: 22px;
}
#shoppingbag #scrollContentDiv {
position: absolute;
top: 4px;
left: 4px;
}
#shoppingbag .bagitem {
background-repeat: no-repeat;
display: block;
width: 64px;
height: 64px;
border: 1px solid #AFAFAF;
margin-right: 4px;
}
* html #shoppingbag .bagitem {
width: 66px;
height: 66px;
w\idth: 64px;
he\ight: 64px;
}
.preloader {
width: 100px;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
visibility: hidden;
}
</style>
<script language="javascript" type="text/javascript">
// this function expects one of three values: {1, -1, 0}
// a value of 1 will move the scrollContentDiv to the right (scrolling left)
// a value of -1 will move the scrollContentDiv to the left (scrolling right)
// a value of 0 will stop scrolling
function scrollItems(direction) {
if (direction != 0) {
theInterval = setInterval("doMove("+direction+")",interval);
} else {
clearInterval(theInterval);
return false;
}
}
function doMove(direction) {
theTable.l = theTable.l + (direction * scrollincrement);
if (theTable.l >= rightlimit) {
theTable.l = rightlimit;
theLeftArrowImg.className="arrowdisabled";
theLeftArrowImgDisabled.className="arrowleftnoclic k";
scrollItems(0);
} else {
theLeftArrowImg.className = "arrowleft";
theLeftArrowImgDisabled.className = "arrowdisabled";
}
if (theTable.l <= leftlimit) {
theTable.l = leftlimit;
theRightArrowImg.className = "arrowdisabled";
theRightArrowImgDisabled.className = "arrowrightnoclick";
scrollItems(0);
} else {
theRightArrowImg.className = "arrowright";
theRightArrowImgDisabled.className = "arrowdisabled";
}
theTable.style.left = theTable.l + "px";
}
function initShoppingBagScroller() {
theTable = document.getElementById('scrollContentDiv');
theLeftArrowImg = document.getElementById('arrowleftimg');
theLeftArrowImgDisabled = document.getElementById('arrowleftimgdisabled');
theRightArrowImg = document.getElementById('arrowrightimg');
theRightArrowImgDisabled = document.getElementById('arrowrightimgdisabled');
theItems = theTable.getElementsByTagName('td');
theTable.w = (theItems.length) * 70; //width of each item
theTable.l = 4; // scrollContentDiv initial left position
viewerWidth = 571; // width of scrollWindowDiv
// these two values can be used to adjust scrolling speed
interval = 50; // time between scroll jumps in msec (1000 = 1 sec)
scrollincrement = 20; // scroll jump distance in pixels
rightlimit = 4;
if (theTable.w > viewerWidth) {
leftlimit = viewerWidth - theTable.w;
} else {
leftlimit = 4;
}
scrollItems(1);
}
</script>
<table border="0" cellpadding="0" cellspacing="0" >
<tr>
<td width="750">
<!-- this outer table represents the page containing the shopping cart div -->
<!-- begin cut here -->
<div id="shoppingbag">
<div class="preloader" style="background-image: url(flash/imagenes row/comprando-lef.gif);"></div>
<div class="preloader" style="background-image: url(flash/imagenes row/comprando-right-over.gif) ;"></div>
<div id="obl" class="outercorner" style="background-image: url(flash/imagenes row/bl_v1.gif); top: 90px; left: 0px;"></div>
<div id="obr" class="outercorner" style="background-image: url(flash/imagenes row/br_v1.gif); top: 90px; left: 745px;"></div>
<div id="oul" class="outercorner" style="background-image: url(flash/imagenes row/ul_v1.gif); top: 0px; left: 0px; "></div>
<div id="our" class="outercorner" style="background-image: url(flash/imagenes row/ur_v1.gif); top: 0px; left: 745px"></div>
<div id="header" style="background-image: url(flash/imagenes row/compras.gif);"></div>
<a href="vercarro.php" id="editlink">• Editar</a>
<a href="vercarro.php" id="checkout"><img src="flash/imagenes row/checa.gif" alt="Checkout" border="0" width="78" height="19"></a>
<div id="arrowdiv">
<div id="ibl" class="innercorner" style="background-image: url(flash/imagenes row/bl_v1.gif); top: 78px; left: 0px;"></div>
<div id="ibr" class="innercorner" style="background-image: url(flash/imagenes row/br_v1.gif); top: 78px; left: 610px;"></div>
<div id="iul" class="innercorner" style="background-image: url(flash/imagenes row/ul_v1.gif); top: 0px; left: 0px;"></div>
<div id="iur" class="innercorner" style="background-image: url(flash/imagenes row/ur_v1.gif); top: 0px; left: 610px;"></div>
<a href="#" id="arrowleft" onMouseDown="scrollItems(1);return false;" onMouseUp="scrollItems(0);" onClick="return false;" onMouseOver="MM_swapImage('arrowleftimg','','flash/imagenes row/shoppingbagarrow-left-over_v1.gif','arrowleftimg-off','','flash/imagenes row/shoppingbagarrow-left_v1.gif',1);" onMouseOut="MM_swapImgRestore();">
<img id="arrowleftimg" class="arrowdisabled" src="flash/imagenes row/shoppingbagarrow-left_v1.gif" alt="Scroll Left" border="0" width="14" height="73">
<img id="arrowleftimgdisabled" class="arrowleftnoclick" src="flash/imagenes row/shoppingbagarrow-left-disabled_v1.gif" alt="Scroll Left" border="0" width="14" height="73">
</a>
<a href="#" id="arrowright" onMouseDown="scrollItems(-1);return false;" onMouseUp="scrollItems(0);" onClick="return false;" onMouseOver="MM_swapImage('arrowrightimg','','flas h/imagenes row/shoppingbagarrow-right-over_v1.gif','arrowrightimg-off','','flash/imagenes row/shoppingbagarrow-right_v1.gif',1);" onMouseOut="MM_swapImgRestore();" >
<img id="arrowrightimg" class="arrowdisabled" src="flash/imagenes row/shoppingbagarrow-right_v1.gif" alt="Scroll Right" border="0" width="14" height="73">
<img id="arrowrightimgdisabled" class="arrowrightnoclick" src="flash/imagenes row/shoppingbagarrow-right-disabled_v1.gif" alt="Scroll Right" border="0" width="14" height="73">
</a>
<div id="scrollWindowDiv" style="background-color: #ffffff;">
<div id="scrollContentDiv">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<?php
$td=0;
foreach($carro as $k => $v){
if ($td % $carro==0){
echo " <td>" ?> <img src="<?php echo $v['imagen'] ?>" width='30'>
<? if ($td % $carro==0)
echo "</td><td>";
else
echo "</td> "; $td++;
}
}?>
</tr>
</table>
</div>
</div>
</div><!-- end arrow div -->
</div>