Border goes under my background image in IE

My code works well in Firefox, Opera, Safari and all other browsers except IE6 and IE7.

The border should go OVER the image, not under it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Banner Demo</title>
<style type="text/css" media="all">
 
#banGreen {
  width: 1003px;
  height: 293px;
  display: block;
  background: #6DB654 url(http://d9qjx79zqpo3.googlepages.com/web.gif) no-repeat scroll 0 0;
}
 
#banGreen .slides {
  height: 293px;
  width: 1003px;
  padding:0;
  margin:0;
  text-align: left;
  float: left;
}
 
#banGreen .slides img {
  margin-top: 12px;
  margin-left: 551px;
  border: 0;
}
 
#banGreen .slides span {
  display: block;
  width: 1003px;
}
 
#banGreen .slides a:hover span {
  display: block;
  width: 991px;
  height: 281px;
  padding: 0;
  margin: 0;
  border: 6px solid #A1D590;
}
 
#banGreen .slides a:hover em {
  display: block;
  height: 281px;
  width: 958px;
  overflow: hidden;
}
 
#banGreen .slides a em {
  display: block;
  height: 293px;
  width: 1003px;
  overflow: hidden;
}
 
#banGreen .slides a:hover img {
  position: relative;
  top: -6px;
  left: -39px;
}
 
#banGreen a:hover del {
  display: block;
  width: 39px;
  height: 40px;
  margin-top: -7px;
  margin-left: -6px;
  background: transparent url(http://d9qjx79zqpo3.googlepages.com/webOver.gif) no-repeat scroll 0 1px;
  border: 0;
  float: left;
  text-decoration: none;
}
</style>
</head>
<body>
 <div id="banGreen">
   <div id="slides" class="slides">
            <a href="/"><span><del></del><em><img src="http://d9qjx79zqpo3.googlepages.com/web1.jpg" alt="" /></em></span></a>
  </div>
 </div>
</body>
</html>

Open in new window

LVL 16
hankknightAsked:
Who is Participating?
 
David S.Commented:
Why are you using a <del> element?

Try giving "#banGreen .slides a em" position:relative
0
 
Drunk_PenguinCommented:
I checked it in IE 7 and found one way to fix it. In line 24, if you cut your top margin in half (from 12px to 6px), that will leave some extra room for the border to appear and doesn't drastically change the look. Not sure if that's what you were looking for, but I gave it a shot.
0
 
hankknightAuthor Commented:
position:relative fixed it!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.