<div> content looks ok in IE6, but way to the right in Firefox

[jack38]

Here is the <div> code in question: it contains a spry detail and master image regions. The images are positioned the way I want in IE6 (they appear centered and on screen). When I preview in firefox/navigator, the images are displayed way to the right, almost off-screen. I tried using position:absolute; top:***px; right:***px; but it doesnt help. Is there a way to fix the layout in firefox?

The css controling the <div> is posted below.

<div id="wrap">
<div spry:detailregion="ds1">
<div id="limg">
<img src="../images/large/{imgfile}" width="{imglarwidth}" height="{imglarheight}" alt="{imgfile}" /> </div>
</div>
<div id="cont">
<div spry:region="ds1">

<ul id="ulthumb"><li spry:repeat="ds1" spry:setrow="ds1"><img src="../images/thumb/{imgfile}" width="{imgthumbwidth}" height="{imgthumbheight}" alt="{imgname}" /></li>
</ul>
</div>
</div>
</div>

css
__________________

@charset "utf-8";
/* CSS Document */

#wrap {
text-align:center;
padding:0px;
height:100px;
width:100px;
margin:0px auto;
}
#limg {
height:1%;
width:0px;
padding:0px;
text-align:center;
margin:0px;
}
#limg img {
padding:5px;
margin:0px auto;
border:1px solid #aaa;
background-color:#fff;
}
#cont {
margin:0px -3px 0px 0px;
padding:0px;
height:1%;
width:700px;
}
#ulthumb {
list-style:none;
list-style-type:none;
margin:0px;
padding:0px;
}
#ulthumb li {
float:left;
margin:30px 10px 0px 0px;
width:auto;
height:auto;
display:block;
}
#ulthumb img {
cursor:pointer;
padding:2px;
border:solid 1px #aaa;
background-color:#fff;
}

[appi2]

Sorry not played with adobes spry framework, but if I strip out the spry stuff and use just the basic html + css you posted, then in FF2 the two images are centered in IE6 they are about 200px from the left of the window and in IE7 the are centered but overlap.

And I dont have a clue which one is supposed to look right ;)