Nivo Slider issue, sliding off original position

Question

so I'm no CSS wizard or Nivo slider master.. I got this working on a page of mine that had nothing with it to begin with.. but when I try to get it working with my prostores page the images come up but the sliding then moves up and left and does it for every slide. I assume there must be some CSS that I need to change.. or something.. but since I dont know much about CSS I dont know what to change.. I just left the default settings in here..

here is where I was testing

http://www.securemycargo.com/servlet/the-template/testnivo/Page

any pointers are appreciated

ok here is the default CSS`

.theme-default .nivoSlider {
    position:relative;
    background:#fff url(loading.gif) no-repeat 50% 50%;
    margin-bottom:10px;
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}
.theme-default .nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
.theme-default .nivoSlider a {
    border:0;
    display:block;
}

.theme-default .nivo-controlNav {
    text-align: center;
    padding: 20px 0;
}
.theme-default .nivo-controlNav a {
    display:inline-block;
    width:22px;
    height:22px;
    background:url(bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin: 0 2px;
}
.theme-default .nivo-controlNav a.active {
    background-position:0 -22px;
}

.theme-default .nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
    opacity: 0;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
.theme-default:hover .nivo-directionNav a { opacity: 1; }
.theme-default a.nivo-nextNav {
    background-position:-30px 0;
    right:15px;
}
.theme-default a.nivo-prevNav {
    left:15px;
}

.theme-default .nivo-caption {
    font-family: Helvetica, Arial, sans-serif;
}
.theme-default .nivo-caption a {
    color:#fff;
    border-bottom:1px dotted #fff;
}
.theme-default .nivo-caption a:hover {
    color:#fff;
}

.theme-default .nivo-controlNav.nivo-thumbs-enabled {
    width: 100%;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled a {
    width: auto;
    height: auto;
    background: none;
    margin-bottom: 5px;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
    display: block;
    width: 120px;
    height: auto;
}`

and I took out the table entry.. does the same thing..I assume I need one of these CSS entries to be modified ?

Answer 1

UPDATE: Layout issues aside, I think this is your primary problem:

GET http://www.securemycargo.com/.../nivo-slider.css 404 (Not Found)

CSS is a critical part of such a utility. Without it, overflow isn't controlled and images aren't sized properly. I've placed the file at http://dq3f8u841c3z3.cloudfront.net/wp-content/plugins/nivo-slider/scripts/nivo-slider/nivo-slider.css in your page via dev tools and it solves your issue.

---

At least part of the problem is that you're using tables for layout, and the table isn't wide enough. The images aren't shown on load, so the browser makes it too narrow. At a minimum, set the width of the table to 100% to let it use the entire main column:

<table width="100%">
    <tr>...

Note that the width attribute is deprecated. If you're using tables for layout, though, you probably don't much care. If you happen to care, use CSS instead:

<table class="main-col">
    <tr>...

<style>
.main-col {width: 100%;}
</style>

Better: remove that table altogether. Tables are for data, and this one has just one cell in it anyway.