Lines behind image (top and bottom) - html

Question

I have a centered image on my website, where i need a top and bottom line.
The catch here, is that i need both lines 1px in behind the image, so that they are "align" in top and bottom of the image. I tried using box-shadow but it doesn't work in IE8 (i know it's terrible).
Anyone who has a answer and dying to tell me?
A quick UPDATE to show you my issue:
I'm using bootstrap 2 and displaying a carousel for images. And when there are only one image, the line should be visible. It need to be able to run in IE8 for the customer.
Image example:
http://postimg.org/image/xi3eurm81/
My example with shadow-box is here:
Html:
<div id="artist-carousel">
<div class="simple-carousel-window">
<div class="simple-carousel-rail">
#if (Model != null)
{
for (var i = 0; i < 3 * Model.Images.Count; i++) // times 3 due to infinite scrolling
{
var index = i % Model.Images.Count;
<div class="simple-carousel-div" data-index="#(i)" data-link="#Model.NativeImages[index]">
<a class="element">
<img src="#Model.Images[index]" />
</a>
<a class="fullsize">
<img src="~/content/images/carousel-fullsize.png" />
</a>
</div>
if (Model.Images.Count <= 2 && i >= 0) { break; }
}
}
</div>
#if (Model.Images.Count >= 3)
{
<a class="simple-carousel-prev" href="#" data-slide="prev">
<img src="~/content/images/carousel-left.png" /></a>
<a class="simple-carousel-next" href="#" data-slide="next">
<img src="~/content/images/carousel-right.png" /></a>
}
</div>
</div>
CSS:
.simple-carousel-window {
width: 820px;
white-space: nowrap;
overflow: hidden;
position: relative;
display: block;
margin-left: -20px;
box-shadow: inset 0 2px 2px -2px #ebebeb, inset 0 -2px 2px -2px #ebebeb;
line-height: 0;
margin-bottom: 20px;
.simple-carousel-rail {
font-size: 0;
}
.simple-carousel-prev {
position: absolute;
top: 150px;
left: 10px;
display: block;
opacity: 0.8;
}
.simple-carousel-next {
position: absolute;
top: 150px;
right: 10px;
display: block;
opacity: 0.8;
}
.simple-carousel-div {
display: inline-block;
position: relative;
.element {
img {
height: 360px;
float: left;
}
}
.fullsize {
display: block;
opacity: 0.5;
position: absolute;
// centering image
top: 150px;
margin-left: -85px;
left: 50%;
}
}
}

Answer 1

DEMO: http://jsfiddle.net/CXKrh/
HTML
<div>
<img src="http://placekitten.com/100" />
</div>
CSS
div {
width: 300px;
height: 98px;
overflow: visible;
border: 1px solid red;
}
div > img {
height: 100px;
margin-top: -1px;
}
The idea is that the height of the container = image height - border width (top and bottom)
We then apply a negative margin to the images to "bump" the image back over the border.