My element display at different position on different window size. How to fix the position?

Take a look at my website: http://homegym.sg/index.php/weight-tree-rack.html

If开发者_Python百科 you mouseover the "more view" words under the product image, an additional images box will appear. Normally it's appearing normally in the center. However when i make my window size smaller, the position of the box will change.

I am using slideviewerpro script and i believe it is the one positioning the box but i am not able to tackle the problem. Here is the source of the script: http://homegym.sg/skin/frontend/default/electronics01-black/js/jquery.slideViewerPro.1.0.js

I believe the additional image box is in div#thumbSlider, have did some try and error modification of the js file but failed to solve the problem.

---

Ok. First of all, your div with width:660px; in product-img-box needs to have position:relative; added to it. Then you need to change the following rule

.product-view .product-img-box #ui0 {
    position: absolute;
    top: 600px;
    left: 580px;
    height: 60px;
}

to

.product-view .product-img-box #ui0 {
    position: absolute;
    height: 60px;
    left: 50%;
    margin-left: -200px;
    margin-top: 15px;
}

widgets.css:589

And then just tweak from there. :)