Positioning Unclear For Multiple Nivo Sliders

[luftikus143]

I am fighting with the positioning of my multiple nivo sliders. I have (in the moment) five sliders which should appear all on the same position, which can be seen here.

The thing is that the positioning in the code is always the same; but it isn't on the browser's display. When clicking on "Keeping Track" or on "Chemicals & Waste", the slider appears either on the top of the page, or is being only partly displayed.

<div style="margin-left: 10px">
    <div id="pagewrap">
        <div class="slidewrap">
            <div id="slider1">
                <a class="lightview" href="images/geg_fish_stocks.png"><img alt="Gallery Picture" title="#caption2" src="images/geg_fish_stocks_light.png" /></a>
                <a class="lightview" href="images/geg_protected_areas.png"><img alt="Gallery Picture" title="#caption6" src="images/geg_protected_areas_light.png" /></a>
            </div>
            <div id="slider2" style="margin-top: -350px; visibility: hidden"> <!-- Atmosphere -->
                <a class="lightview" href="images/geg_temperature.png"><img alt="Gallery Picture" title="#caption4" src="images/geg_temperature_light.png" /></a>
                <a class="lightview" href="images/geg_indoor_cooking.png"><img alt="Gallery Picture" title="#caption17" src="images/geg_indoor_cooking_light.png" /></a>
            </div>
            <div id="slider3" style="margin-top: -350px; visibility: hidden"> <!-- Biodiversity -->
                <a class="lightview" href="images/geg_protected_areas.png"><img alt="Gallery Picture" title="#caption6" src="images/geg_protected_areas_light.png" /></a>
                <a class="lightview" href="images/geg_access_benefit.png"><img alt="Gallery Picture" title="#caption7" src="images/geg_access_benefit_light.png" /></a>
            </div>
            <div id="slider4" style="margin-top: -350px; visibility: hidden"> <!-- Chemicals -->
                <a class="lightview" href="images/geg_radioactive_waste.png"><img alt="Gallery Picture" title="#caption13" src="images/geg_radioactive_waste_light.png" /></a>
                <a class="lightview" href="images/geg_basel_convention.png"><img alt="Gallery Picture" title="#caption14" src="images/geg_basel_convention_light.png" /></a>
            </div>
            <div id="slider5" style="margin-top: -350px; visibility: hidden"> <!-- Keeping Track -->
                <a class="lightview" href="images/kt_hdi.png"><img alt="Gallery Picture" title="#caption9" src="images/kt_hdi_light.png" /></a>
                <a class="lightview" href="images/kt_food_supply.png"><img alt="Gallery Picture" title="#caption10" src="images/kt_food_supply_light.png" /></a>
            </div>

The CSS looks like this:

#slidewrap{
    position:absolute;
    background: #fff;
}    
 
#slider, #slider1, #slider2, #slider3, #slider4, #slider5 {
    position:relative;
    height:auto;
    width:915px;
    border:10px solid rgba(89,117,220,0.33);
    box-shadow:0 0 5px #444;
    margin: 0;
}
#slider img, #slider1 img, #slider2 img, #slider3 img, #slider4 img, #slider5 img{
    position:absolute;
    top:20px;
    left:0px;
    display:none;
}
 

Plugin activation:

$(window).load(function()
{
    $('#slider1').nivoSlider({
        pauseTime: 4000
    });
    $('#slider2').nivoSlider({
        pauseTime: 4000
    });
    $('#slider3').nivoSlider({
        pauseTime: 4000
    });
    $('#slider4').nivoSlider({
        pauseTime: 4000
    });
    $('#slider5').nivoSlider({
        pauseTime: 4000
    });
    $('#slider6').nivoSlider({
        pauseTime: 4000
    });
    $('#slider7').nivoSlider({
        pauseTime: 4000
    });
});    

I am really confused, and have no idea why this would be. I can change the "margin-top" and than some of those sliders get into the right position. But why are some 100% adjusted, and others not?! Thanks for any hints which could help me solve this riddle.