Hello

I'm having an issue for a site I'm working on where the Image slider moves when you zoom in and out. I naturally want it to remain in place when you zoom in and out. This issue does NOT occur in Internet Explorer but does occur in Firefox, Chrome, Safari, and Opera.

I've been fiddling with position for the different slider divs but no luck.

Here is a picture of the problem: http://i.imgur.com/fdW7qCp.jpg

The image in the slider should be directly under the home button.

Here is the html for the slider:

HTML Code:
	<div class="banner">
        <div class="slider">
            <div class="slide">
                <img src="common/images/banner_img.gif" alt="" />
                <div class="wrapper">
                    <div class="slide_text">
                        <h1>Slide One</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipi scing elit. In in lorem sed odio feu giat sagittis vene natis nec dgrjl ueed cqqe nulla.</p>
                        <a href="#"></a>
                    </div>
                </div>
            </div>
            <div class="slide">
                <img src="common/images/banner_img.gif" alt="" />
                <div class="wrapper">
                    <div class="slide_text">
                        <h1>Slide Two</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipi scing elit. In in lorem sed odio feu giat sagittis vene natis nec dgrjl ueed cqqe nulla.</p>
                        <a href="#"></a>
                    </div>
                </div>
            </div>
            <div class="slide">
                <img src="common/images/banner_img.gif" alt="" />
                <div class="wrapper">
                    <div class="slide_text">
						<h1>Slide Three</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipi scing elit. In in lorem sed odio feu giat sagittis vene natis nec dgrjl ueed cqqe nulla.</p>
                        <a href="#"></a>
                    </div>
                </div>
            </div>
         </div>        
        <div class="wrapper">
        	<div class="arrow">            
                <a class="left_arrow" href="#"></a>
                <a class="right_arrow" href="#"></a>        
            </div>
        </div>        
    </div>
CSS:

/*--------------------start of slider style-------------------*/
.banner {
width: 100%;
float: left;
height: 541px;

}
.slider {
width: 100%;
min-width: 990px;
float: left;
position: relative;
z-index: 9;
top: 0;
left: 0;
text-align: center;
background: #76645f;
}
.slide {
width: 100%;
position: absolute;
z-index: 9;
top: 0;
left: 0;
overflow: hidden;
}
.slide .wrapper {
position: relative;
}
.slide_text {
width: 434px;
height:150px;
float: left;
position: absolute;
z-index: 99;
bottom: 12px;
left: 22px;
text-align: left;
background:url(../images/slide_text_bg.gif) repeat 0 0;
opacity:0.8;
padding: 12px 22px 16px;
}
.slide_text h1{
font-size: 2.300em;
line-height: 1.00em;
color:#F1B6CB;
font-family: 'Times';
text-transform: uppercase;
padding-bottom: 5px;
*padding-bottom:0px;
float: left;
letter-spacing: 1px;
}
.slide_text p {
font-size: 1.063em;
line-height: 1.150em;
color:white;
font-family: 'CalibriRegular';
clear: left;
*margin-top:-5px;
}
.slide_text a {
float: right;
width: 132px;
height:22px;
text-align: center;
background:url(../images/read_more.gif) repeat-x 0 0;
text-transform: uppercase;
text-decoration: none;
font-size: 1.375em;
line-height: 1.125em;
color: #575853;
font-family: 'CalibriRegular';
padding: 5px 0;
margin-top: 23px;
margin-right: -10px;
position: relative;
z-index: 9;
}
.arrow {
position: relative;
z-index: 999;
top: 213px;
left: 0;
}
.slide_text a:hover {
background-position: 0 bottom;
}
.left_arrow {
width: 27px;
height: 41px;
background:url(../images/left_arrow.gif) no-repeat 0 0;
position: absolute;
z-index: 9999999;
top: 0;
left: 0;
}
.right_arrow {
width: 27px;
height: 41px;
background:url(../images/right_arrow.gif) no-repeat 0 bottom;
position: absolute;
z-index: 999999;
top: 0;
right: 0;
}
/*--------------------end of slider style-------------------*/