asked on

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

LZ1

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

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

Donnie Walker

ASKER

The px in div#baby_frame was a typo.

But the changes had no effect in IE6 or IE7.

LZ1

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?

Donnie Walker

ASKER

Yes, but now the div#baby_name screws up in Firefox and Safari.

LZ1

Safari looked fine
safari.jpg

Donnie Walker

ASKER

My main problem is IE6 and 7 and the stacking of the layers.

David S.

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/

Donnie Walker

ASKER

Kravimir, can you give me an example? I don't understand what you mean.

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

Donnie Walker

ASKER

Thanks!