asked on

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

ASKER CERTIFIED SOLUTION

David S.

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Drunk_Penguin

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.

hankknight

ASKER

position:relative fixed it!