IE8 Image bigger than div, relative / absolute and negative margins - html

Question

So here is my HTML code in question.
<script type="text/css">
.slider-holder {
background-color:transparent;
}
.slider-bg {
min-height: 295px;
position: relative;
z-index: 1;
border-bottom:0px;
}
.slider {
height: 295px;
padding: 1px 17px 0;
margin: 0 auto;
position: relative;
background: transparent;
}
.slider .items,
.slider .items2 {
position: relative;
height: 293px;
float: left;
}
.slider .items div.item,
.slider .items2 div.item{
height: 293px;
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.slider .slider-text {
width: 720px;
position: relative;
z-index: 2;
padding: 70px 0 0;
}
.slider .slider-text, .slider .slider-text p {
background-color: inherit;
color: #fff;
font-size: 32px;
line-height: 33px;
}
.slider .slider-text.smaller p
{
font-size:24px;
}
.slider .slider-text p { padding: 0 0 10px; }
.slider .slider-text a.slider-btn {
background: #58940a url('img/btn/slider-btn.png') no-repeat 8px 7px;
display: block;
float: left;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: 0px 0px 40px #666;
-moz-box-shadow: 0px 0px 40px #666;
box-shadow: 0px 0px 40px #666;
padding: 6px 10px 6px 32px;
color: #fff;
font-size: 15px;
line-height: 20px;
height: 20px;
}
.slider .slider-img {
position: absolute;
bottom: 0px;
padding: 0 5px 0 0;
z-index: 1;
left:-312px;
zoom: 1;
}
.slider .slidetabs {
position: absolute;
left:375px;
bottom: 27px;
z-index: 3;
}
.slider .slidetabs a {
background: url('img/elem/thumbnail-disc.png') no-repeat left top;
display: block;
width: 11px;
height: 11px;
float: left;
margin: 0 6px 0 0;
}
.slider .slidetabs a:hover, .slider .slidetabs a.current { background-position: left bottom; }
</script>
<div class="slider-holder">
<div class="slider-bg">
<!--begin:slider-->
<div class="slider">
<div class="items">
<!--begin:item-->
<div class="item" style="display: none; ">
<div class="slider-text"></div>
<div class="slider-img">
<img src="image.jpg" alt="" width="1600" height="294" align="center">
</div>
</div>
<!--end:item-->
<!--begin:item-->
<div class="item" style="display: none; ">
<div class="slider-text smaller"></div>
<div class="slider-img">
<img src="image2.jpg" alt="" width="1600" height="294" align="center">
</div>
</div>
<!--end:item-->
<!--begin:item-->
<div class="item" style="display: block; ">
<div class="slider-text"></div>
<div class="slider-img">
<a href="http://www.link.com" target="_blank">
<img src="image.jpeg" alt="" width="1600" height="294" align="center">
</a>
</div>
</div>
<!--end:item-->
</div>
<div class="slidetabs">
</div>
</div>
<!--end:slider-->
</div>
</div>
The problem with this particular setup is that the img is bigger than the div (which is intentional. And this setup works in most browswers except IE8. It gets cut off at the .slider-holder box (or at least it appears to).

Answer 1

Found out that a caching plugin was breaking the site. carry on.