Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1180
  • Last Modified:

How do I solve IE6 / IE7 z-index layer problem with images?

I have a site here: http://www.kellercrescentdigital.com/babies/index.php?z=1 that has two image layers that overlap.

It looks good in FireFox 3 and Safari but the images are not properly stacked in IE6 and 7. Also my layer that says "Introducing Rylynn Jade" is not positioned right with those browsers.

How can I fix this?
#baby_frame {
      position:absolute;
      background: url("../images/bg_baby_frame.png") top left no-repeat;
      width: 500px;
      height: 600px;
      z-index: 10px;
}
#baby_pic {
      position:absolute;
      top: 120px;
      left: 50px;
      z-index: -1;
}
#baby_name {
      position: absolute;
      top: 3px;
      left: 20px;
      width: 350px;
}
.bdetail th {
	font-size: 12px;
	color: #000;
      text-align: right;
      font-weight: bold;
}    
.babydetails {
      position: absolute;
      top: 410px;
      left: 195px;
      width: 255px;
}
img.dogear {
    position: relative;
    top: -13px;
    right: -13px;
    float: right;
}
 
 
 
 
 
body {	
	background: #ffffff;
	font: 12px Tahoma, Verdana, Arial, Helvetica, sans-serif;
	margin: 0; 
	padding: 0;
	color: #000000;
}
h1 {
      color: #336699;
      font-size: 15px;
      padding: 2px 0 0;
}
 
h3 {
      color: #000;
      font-size: 27px;
      margin-top: -5px;
      margin-bottom: 15px;
}
h4 {
      color: #000;
      font-size: 17px;
      margin-bottom: 0px;
      padding-top: 5px;
}
#container {
	width: 500px;  
	margin: 0px auto; 
	padding: 0px;
	border:0;
}
th {
	font-size: 9px;
	color: #336699;
      text-align: center;
      font-weight: bold;
}
 
div.contentbox{
    float: left;
    background: #F7F7F7;
    border: 1px dotted #ccc;
    padding: 12px;
    width: 473px;
    margin-top: 20px;
}

Open in new window

0
Donnie Walker
Asked:
Donnie Walker
  • 5
  • 4
  • 2
1 Solution
 
LZ1Commented:
As for the baby_detail DIV, try the code below and let me know
In regards to the DIV baby_frame, take the px off of the Z-index.  Z-Index is a numerically based code and does not allow for pixels or percents.
http://www.w3schools.com/Css/pr_pos_z-index.asp  

.babydetails {
	position: absolute;
	left: 195px;
	width: 255px;
	bottom: 35px;
}

Open in new window

0
 
LZ1Commented:
I'm sorry, I forgot to comment on the #babyname DIV.  You may also want to consider using padding to get those last few nudges just right.  Try this:
#baby_name {
	position: absolute;
	top: 10px;
	left: 20px;
	width: 350px;
	padding-top: 15px;
	padding-left: 10px;
}

Open in new window

0
 
Donnie WalkerAuthor Commented:
The px in div#baby_frame was a typo.

But the changes had no effect in IE6 or IE7.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LZ1Commented:
I'm on IE7 in Vista and when I changed the positioning from the top to the bottom, it did move it.  Albeit not very much, but it did take it off of the image.  Did you try Ctrl+F5 to refresh IE?
0
 
Donnie WalkerAuthor Commented:
Yes, but now the div#baby_name screws up in Firefox and Safari.
0
 
LZ1Commented:
Safari looked fine
safari.jpg
0
 
Donnie WalkerAuthor Commented:
My main problem is IE6 and 7 and the stacking of the layers.
0
 
David S.Commented:
Negative values for z-index are not handled consistently cross-browser. I recommend you add a new <div> (as a child of #baby_frame) with the frame image as its background and position it on top of the photo.

Many elements have default padding and/or margins and browsers differ on their defaults for these. IE doesn't put a top  margin on those headers by default while other browsers do. Simply specify values for the margins.

I recommend you read this: http://www.dynamicsitesolutions.com/blog/2008/12/10-things-you-might-not-know-about-using-css/
0
 
Donnie WalkerAuthor Commented:
Kravimir, can you give me an example? I don't understand what you mean.
0
 
David S.Commented:
Try this:
#baby_frame {
      position:absolute;
      width: 500px;
      height: 600px;
      z-index: 10;
}
#baby_frame .imageFrame {
      background: url("../images/bg_baby_frame.png") top left no-repeat;
      position:absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 30;
}
#baby_pic {
      position:absolute;
      top: 120px;
      left: 50px;
      z-index: 10;
}
#baby_name {
      position: absolute;
      top: 3px;
      left: 20px;
      width: 350px;
      z-index: 50;
}
.babydetails {
      position: absolute;
      top: 410px;
      left: 195px;
      width: 255px;
      z-index: 60;
}
h3 {
      color: #000;
      font-size: 27px;
      margin-top: -5px;
      margin-bottom: 15px;
}
h4 {
      color: #000;
      font-size: 17px;
      margin: 1.33em 0 0;
      padding-top: 5px;
}
 
 
 
<div id='baby_frame'>
<div id='baby_name'>
<h4>Introducing</h4>
<h3>Rylynn Jade</h3></div>
<img src='photos/636099868_rylynn.jpg' id='baby_pic' width='400' />
<div class='babydetails'><table class='bdetail'>
<tr><th>Birthday:</th><td>January 31, 2009</td></tr>
<tr><th>Time of Birth:</th><td>12:51 PM</td></tr>
<tr><th>Weight:</th><td>7 lbs 1 oz</td></tr>
<tr><th>Length:</th><td>21 inches</td></tr>
<tr><th>Delivered by:</th><td>Dr. Murphy</td></tr>
<tr><th>Proud Family:</th><td>Christina and Jeremy</td></tr>
</table></div>
<div class='imageFrame'></div></div>

Open in new window

0
 
Donnie WalkerAuthor Commented:
Thanks!
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.

  • 5
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now