We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

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

Donnie Walker
on
Medium Priority
1,232 Views
Last Modified: 2012-06-27
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

Comment
Watch Question

LZ1
Top Expert 2011

Commented:
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

LZ1
Top Expert 2011

Commented:
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

Author

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

But the changes had no effect in IE6 or IE7.
LZ1
Top Expert 2011

Commented:
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?

Author

Commented:
Yes, but now the div#baby_name screws up in Firefox and Safari.
LZ1
Top Expert 2011

Commented:
Safari looked fine
safari.jpg

Author

Commented:
My main problem is IE6 and 7 and the stacking of the layers.
David S.Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009

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/

Author

Commented:
Kravimir, can you give me an example? I don't understand what you mean.
Consultant & Challenge Subduer
CERTIFIED EXPERT
Top Expert 2009
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

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
Thanks!
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.