• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 216
  • Last Modified:

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

0
hankknight
Asked:
hankknight
1 Solution
 
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

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now