Hello

I have an issue on a site that I'm working on where the Image Slider moves as you zoom out/in. It occurs in Firefox, Chrome, Opera, and Safari but NOT in IE.

Here's a pic of the problem: http://i.imgur.com/fdW7qCp.jpg

The image should be located right under the Home button.

Please help Thanks!

html:

<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-------------------*/