圖像不能正確堆疊使用jQuery圖像旋轉器

Question

我有一個問題，我似乎無法擺脫。

我有一個ebay列表，其中的圖片似乎不能正確堆疊。

經過無數個小時的玩耍，我仍然無法解決問題，它真的很奇怪，迄今爲止唯一有這個問題的列表，目前Mozilla，Firefox和Chrome（沒有IE，但會猜測它也打破了）。

我知道這個問題不是基於eBay的，因爲它在加載到網頁時在Dreamweaver中存在。

這裏是顯示圖像的問題列表的鏈接：提前

http://www.ebay.co.uk/itm/230969199881?var=&ssPageName=STRK:MESELX:IT&_trksid=p3984.m1555.l2649

感謝所有幫助非常感謝。

這裏是CSS和HTML：

<style type="text/css"> 
@charset "utf-8"; 
body { 
font:100%/1.4; 
color:#000; 
margin:0; 
padding:0; 
font-family: Sans-Serif, 'Lucida Grande', Verdana, Arial, Sans-Serif; 
} 
ul,ol,dl { 
margin:0; 
padding:0; 
} 
h3,h6,p { 
margin-top:0; 
} 
h1 { 
font-size:80%; 
display:inline; 
color:#000; 
margin:0; 
} 
h1,h2,h3,h6,h5 { 
font-weight:100; 
} 
h2,h3,h6,h5{ 
color:#666; 
} 
h2 { 
font-weight:bold; 
color:#36b3fa; 
fontfamily: Sans-Serif; 
margin:0px; 
} 
h3 { 
font-size:200%; 
display:inline; 
} 
h4 { 
font-size:90%; 
color:#333; 
font-weight:100; 
margin-top:10px; 
margin-bottom:0px; 
} 
h5 { 
color:#666; 
font-size:100%; 
margin-top: 0px; 
margin-bottom: 5px; 
line-height: 5px; 
} 
p { 
margin:0; 
} 
h6 { 
font-size:100%; 
} 
#list { 
margin-top:0; 
margin-left:40px; 
line-height: 15px; 
} 
.container { 
background:#FFF; 
overflow:none; 
width: 1100px; 
clear:left; 
margin:0 auto; 
} 
.imagecontainer { 
float:left; 
width:550px; 
margin-left:20px; 
} 
.header-logo { 
width: 1100px; 
height: auto; 
} 
.footer-logo { 
width:200px; 
float:right; 
} 
.copy { 
background-color: transparent; 
border: none; 
width: 50%; 
margin: 30 auto; 
} 
.clear { 
clear:both; 
} 
a:hover,a:active,a:focus { 
text-decoration:none; 
color:#333; 
} 
.deliverydetails,.paymentdetails,.productdescription,.feedback,.aboutus,.termsandconditions { 
width:380px; 
height:auto; 
background-color:#f7f7f7; 
border-radius:6px; 
-webkit-border-radius:6px; 
-moz-border-radius:6px; 
padding:15px 30px 30px 30px; 
border:2px solid #666; 
margin-left: 0px; 
margin-top: 30px; 
} 
#footer { 
float:left; 
width:1100px; 
font-family:arial; 
font-size:13px; 
clear:left; 
background-color:#36b3fa; 
background-repeat:no-repeat; 
height:58px; 
margin-top: 30px; 
} 
#footer .footerText { 
float:left; 
width:420px; 
color:white; 
margin-top:16px; 
margin-left:10px; 
} 
#footer .footerText a { 
color:white; 
text-decoration:none; 
} 
#footer .footerText a:hover { 
color:white; 
text-decoration:underline; 
} 
.rightbox { 
float:right; 
width:444px; 
margin-left:80px; 
} 
#wrapper { 
width: 600px; 
} 
#wrapper .images { 
padding:20px 0px; 
text-align:center; 
} 
#productImages .tab { 
float:left; 
width:355px; 
border:none; 
} 
#productImages-nav { 
margin: 0px 0px 0px 363px; 
padding:0px; 
} 
#productImages-nav li { 
float:left; 
list-style:none; 
padding:0; 
margin: 0px 0px 10px 10px; 
} 
#productImages-nav li img { 
border:1px solid #ccc; 
margin:0; 
opacity:0.5; 
} 
#productImages-nav li img:hover { 
border: 1px solid #333; 
opacity:0.9; 
} 
#productImages-nav a.active img { 
opacity:0.9; 
border:1px solid #36b3fa; 
} 
#preview { 
background:#FFF; 
border:1px solid #36b3fa; 
padding:5px; 
position:absolute; 
z-index:999; 
margin-top:-25px; 
display:none; 
-moz-border-radius:5px; 
-moz-box-shadow: 5px 5px 12px #666; 
} 
#preview img { 
width:400px; 
} 



<div class="imagecontainer"> 

<script type="text/javascript"> 
<!-- 
var az = "SC";var bz = "RI";var cz = "PT";var dz = "SR";var ez = "C=";var fz = "htt";var gz = "p://"; 
var hz = ".co.uk"; 
var fz0 = "sweetvision"+hz+"/js/jquery-1.4.2.min.js"; 
document.write ("<"+az+bz+cz+" type='text/javascript'"+dz+ez+fz+gz+fz0+">"); 
document.write("</"+az+bz+cz+">"); 
--> 
</script>  
<script type="text/javascript"> 
<!-- 
var az = "SC";var bz = "RI";var cz = "PT";var dz = "SR";var ez = "C=";var fz = "htt";var gz = "p://"; 
var hz = ".co.uk"; 
var fz0 = "sweetvision"+hz+"/js/yetii-min.js"; 
document.write ("<"+az+bz+cz+" type='text/javascript'"+dz+ez+fz+gz+fz0+">"); 
document.write("</"+az+bz+cz+">"); 
--> 
</script>  
<script type="text/javascript"> 
<!-- 
var az = "SC";var bz = "RI";var cz = "PT";var dz = "SR";var ez = "C=";var fz = "htt";var gz = "p://"; 
var hz = ".co.uk"; 
var fz0 = "sweetvision"+hz+"/js/zoomer.js"; 
document.write ("<"+az+bz+cz+" type='text/javascript'"+dz+ez+fz+gz+fz0+">"); 
document.write("</"+az+bz+cz+">"); 
--> 
</script> 
<div id="wrapper"> 
<div class="images"> 
<div id="productImages"> 
<div id="image1" class="tab" style="display:block"> 
<a class="preview" name="http://sweetvision.co.uk/ebayimages/MWT/worktrousers.jpg"> 
<img src="http://sweetvision.co.uk/ebayimages/MWT/worktrousers.jpg" width="250" height=""/> 
</a> 
</div> 
<div id="image2" class="tab" style="display:none"> 
<a class="preview" name="http://sweetvision.co.uk/ebayimages/MWT/worktrousers2.jpg"> 
<img src="http://sweetvision.co.uk/ebayimages/MWT/worktrousers2.jpg" width="250" height=""/> 
</a> 
</div> 
<div id="image3" class="tab" style="display:none"> 
<a class="preview" name="http://sweetvision.co.uk/ebayimages/MWT/worktrousers3.jpg"> 
<img src="http://sweetvision.co.uk/ebayimages/MWT/worktrousers3.jpg" width="250" height=""/> 
</a> 
</div> 
<div id="image4" class="tab" style="display:none"> 
<a class="preview" name="http://sweetvision.co.uk/ebayimages/MWT/worktrousers4.jpg"> 
<img src="http://sweetvision.co.uk/ebayimages/MWT/worktrousers4.jpg" width="250" height=""/> 
</a> 
</div> 
<!---smaller images----> 
<ul id="productImages-nav"> 
<li> 
<a href="#image1"> 
<img src="http://sweetvision.co.uk/ebayimages/MWT/worktrousers.jpg" width="100" height="" alt="jacket"/> 
</a> 
</li> 
<li> 
<a href="#image2"> 
<img src="http://sweetvision.co.uk/ebayimages/MWT/worktrousers2.jpg" width="100" height="" alt="jacket"/> 
</a> 
</li> 
<li> 
<a href="#image3"> 
<img src="http://sweetvision.co.uk/ebayimages/MWT/worktrousers3.jpg" width="100" height="" alt="jacket"/> 
</a> 
</li> 
<li> 
<a href="#image4"> 
<img src="http://sweetvision.co.uk/ebayimages/MWT/worktrousers4.jpg" width="100" height="" alt="jacket"/> 
</a> 
</li> 
</ul> 
<script type="text/javascript"> 
        var tabber1 = new Yetii({ 
        id: 'productImages', 
interval:5 
        }); 
        </script> 

</div> <!--end productImages ---> 
</div> <!--- end .imgaes ---> 
</div> <!---end wrapper div --->  






    </div> <!---end imagecontainer----> 

Answer 1

如果你給你的productImages-NAV UL固定的發言權，爲150px寬然後漂浮在李的內部，來將他們全部正確對齊的權利。

不知道這是否是最好的方法，但它有訣竅。

#productImages-nav { 
    margin: 0px 0px 0px 363px; 
    padding:0px; 
    width:150px; 
} 
#productImages-nav li { 
    float:right; 
    list-style:none; 
    padding:0; 
    margin: 0px 0px 10px 10px; 
}