2 Replies - 1112 Views - Last Post: 14 November 2010 - 11:39 AM

#1 CMattAyers  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 14-November 10

Z-index Issue in All Browsers

Posted 14 November 2010 - 10:51 AM

This has been driving me crazy, so any help would be very appreciated. I am trying to get the "worship.png", which is an image of a card, to appear to be laying on top of the "life.png" image, which is a game board. I was able to get z-index code to work in the past, to position a logo at the top left of a page as I did with this page. For some reason, however, this simply is not working for me, no matter how many different combinations of stacking order, position tags, file formats, browsers, etc. I try.

HTML:

<!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>Living Well Church of the Nazarene - Salem, VA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="children.css" />
</head>

<body>

<div id="logo">
<a href="index.html"><img src="images/logo.png" border="0" alt="This is the Living Well logo"></img src></a>
</div>

<div id="life">
<img src="images/life.png" border="0" alt="This is a Game of Life board"></img src>
</div>

<div id="worship">
<a href="chworship.html"><img src="images/worship.png" border="0" alt="This is the link to the Worship page"></img src></a>
</div>

<div id="footer">
<div align="center">
3631 Evelyn Dr. Salem VA 24153 - (540) 380-0272
</div>


</body>

</html>


CSS:

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
background: #ffffff url(images/woodgrain.jpg);
background-attachment:fixed;
font-family: helvetica,arial,Sans-serif;
font-size: 100%;
width: 100%;
height:100%
overflow-x:hidden;
overflow-y:hidden;
position:relative;
}

#logo{
margin-bottom:-20px;
margin-top:3px;
margin-left:5px;
padding-left:0px;
z-index:4;
position:relative;
}

#worship{
margin-left:300px;
margin-top:200px;
position:relative;
padding:0px;
z-index:10;
}

#life {
height: 750px;
width:920px;
padding:0px;
position:relative;
margin-top:-125px;
overflow-x:hidden;
overflow-y:hidden;
background-attachment:fixed;
z-index:-1;
}

.header{
}

#footer{
margin:auto;
left:0;
right:0;
bottom:0;
height:50px
width:100%
text-align:center;
padding:8px;
position:fixed;
background-color:#0080ff;
z-index:5;
}

a:link{
color: white;
font-family: Helvetica, arial, sans serif;
text-decoration: bold;
}

a:visited{
color: purple;
font-family: Helvetica, arial, sans serif;
text-decoration:none;
}

a:hover{
color: white;
font-family: Helvetica, arial, sans serif;
}

a:active{
color: white;
font-family: Helvetica, arial, sans serif;
}

Is This A Good Question/Topic? 0
  • +

Replies To: Z-index Issue in All Browsers

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4187
  • View blog
  • Posts: 11,845
  • Joined: 18-April 07

Re: Z-index Issue in All Browsers

Posted 14 November 2010 - 11:34 AM

You have to keep in mind that when you position by relative, you are positioning an element in relation to other elements on the page. The graphics are their and their z-index should be working, they have just been pushed off the page. Your life image height is 750 pixels, which means that in order for your worship picture (which is sitting after the life div) it has to have a negative margin-top so that it will actually move up the page (it is being pushed down). Try giving it a -500 or -600px and you should see it magically appear.

The problem I am saying is that you are not having an issue with z-index, you are having an issue with where images are located in relation to one another. Just to show you this, you can try putting all elements into absolute positioning and making their top margin like 2px and you will see them stack up on one another.

Again, relative position is positioning based on where they would normally be in the natural flow. So if one div pushes down another div following it by 300px, that following div is going to have to set a negative top margin of -300 to get back to where it was.

Hope this is clear. :)

This post has been edited by Martyr2: 14 November 2010 - 11:35 AM

Was This Post Helpful? 0
  • +
  • -

#3 CMattAyers  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 14-November 10

Re: Z-index Issue in All Browsers

Posted 14 November 2010 - 11:39 AM

View PostMartyr2, on 14 November 2010 - 10:34 AM, said:

You have to keep in mind that when you position by relative, you are positioning an element in relation to other elements on the page. The graphics are their and their z-index should be working, they have just been pushed off the page. Your life image height is 750 pixels, which means that in order for your worship picture (which is sitting after the life div) it has to have a negative margin-top so that it will actually move up the page (it is being pushed down). Try giving it a -500 or -600px and you should see it magically appear.

The problem I am saying is that you are not having an issue with z-index, you are having an issue with where images are located in relation to one another. Just to show you this, you can try putting all elements into absolute positioning and making their top margin like 2px and you will see them stack up on one another.

Again, relative position is positioning based on where they would normally be in the natural flow. So if one div pushes down another div following it by 300px, that following div is going to have to set a negative top margin of -300 to get back to where it was.

Hope this is clear. :)


This worked perfectly - thank you very much!

I actually suspected my margins were probably messed up at the beginning, but I guess I didn't play with them enough and then got caught up in all the other things that might have been wrong. I've been re-validating and re-ordering my code for hours trying to figure this out, but I guess that just goes to show it can be so simple sometimes.

Thank you again, sincerely!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1