z-index not working for me... [Archive]

Click to See Complete Forum and Search --> : z-index not working for me...

motherandmore

01-22-2008, 04:54 PM

I know something is wrong somewhere because this is actually working in ie but not firefox!!! My code validates but I can't see my fancyl image that should sit under the text at the bottom of the page.

HERE IS MY CSS
* {margin:0; padding:0; border:none;}

body {background-color:#94a8be;}

#container {width:960px;
background-color:#eee3c7;
margin-right:auto;
margin-left:auto;}

#header {background-image:url('images/header.jpg');
height:171px;}

#menu {width:960px;
height:50px;}

#submenu {max-width:214px;
background-color:#012b5d;
position:absolute;
top:221px;
height:477px;}

#content {background-color:#eee3c7;
position:relative;
left:214px;
max-width:747px;
height:477px;}

p {margin-left:105px;
margin-right:105px;}

ul {list-style-position: inside}

li {padding-left:120px;}

img {display:block;}

.title {padding-top:60px;
padding-left:43px;}

.subtitle {margin: 15px 1px 5px 93px;}

.floatright {float:right;
position:relative;
bottom:30px;}

.fancyl {position:absolute;
right:40px;
bottom:10px;
z-index:-1;}

HERE IS MY HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang= "en">

<head><title>Legacy Preparatory Academy</title>

<link rel="stylesheet" type="text/css" href="lpa.css" />
<script type="text/javascript" language="javascript" src="loadimages.js"></script>

</head>

<body>

<div id="container">
<div id="header"></div>

<div id="menu">


<script type="text/javascript" src="menu/milonic_src.js"></script>
<noscript><a href="http://www.milonic.com/">JavaScript DHTML Menu Powered by Milonic</a></noscript>
<script type="text/javascript" src="menu/mmenudom.js"></script>
<script type="text/javascript" src="menu/menu_data.js"></script>



</div>

<div id="submenu">
<img src="images/smphilosophical.jpg" width="214" height="219" alt="The Academy" />
</div>

<div id="content">
<img class="title" src="images/tphilosophical.gif" width="328" height="29" alt="Philosophical Basics" />

<img class="subtitle" src="images/stmission.gif" width="73" height="22" alt="Mission" />

<p>Legacy Preparatory Academy builds the foundation of knowledge and critical thinking skills necessary for children to become independent learners for life.<br /><br />
Our mission is to:</p>
<ul>
<li>Provide a classically-based curriculum that is thorough and challenging</li>
<li>Integrate fine arts to enhance learning</li>
<li>Teach the value of public virtue to promote respect</li>
<li>Engage parents as real partners to share in enriching student education</li>
<li>Honor each child as an individual and foster their innate curiosity and desire to learn</li></ul>

<img class="fancyl" src="images/fancyl.gif" width="228" height="214" alt=" " />

</div>

</div>
</body>
</html>

WebJoel

01-22-2008, 05:13 PM

I could be mistaken, but negative-value z-indexes only work on IE. Try making the "-1" be "1" (or "+1") and raise everything else a number or two higher..

Centauri

01-22-2008, 05:53 PM

Why not use the image as a background to #content instead ?#content {background-color:#eee3c7;
position:relative;
left:214px;
max-width:747px;
height:477px;
background-image: url(images/fancyl.gif);
background-repeat: no-repeat;
background-position: right bottom;
}

motherandmore

01-22-2008, 05:56 PM

w3 schools has z-index listed for ie, ff, and n. I've tried playing with the z-index numbers and have been able to make it show up but not below the text.

Any other ideas anyone, please?

motherandmore

01-22-2008, 05:59 PM

I think I've found it...looks like it needs to follow position-relative and I wanted it under position-absolute

motherandmore

01-22-2008, 06:02 PM

nope, that's not it...still need help please

WebJoel

01-23-2008, 09:39 AM

I got rid of the z-index thing (you don't need it, this mage is not expected to 'move'), changed some stuff, etc. Just small tweakages mostly, all in your "<STYLE></STYLE>".
This looks okay now, validates and looks the same now for IE and Fx.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang= "en">

<head>
<title>Legacy Preparatory Academy</title>

<link rel="stylesheet" type="text/css" href="lpa.css" />
<script type="text/javascript" language="javascript" src="loadimages.js"></script>

<style type="text/css">
* {margin:0; padding:0; border:none;}

body {background-color:#94a8be;}

#container {width:960px;
position:relative; overflow:hidden;
background-color:#eee3c7;
margin:0 auto;
}

#header {background-image:url('images/header.jpg');
position:relative; width:auto; border-bottom:3px double silver; height:171px;
padding:10px 20px;}

#menu {/*width:960px;*/ width:210px; border:1px solid green; height:auto; /*height:50px;*/}

#submenu {max-width:214px;
position:absolute; left:0;
background-color:#012b5d;
height:477px;}

#content {background-color:#eee3c7;
margin-left:220px; width:auto; border:2px solid purple
position:relative;
max-width:747px;
padding:0 10px 10px 0;
height:auto;/*477px;*/}

p {margin-left:105px;
margin-right:105px;}

ul {list-style-position: inside}

li {padding-left:/*1*/20px;}

img {display:block;}

.title {padding-top:60px;
padding-left:43px;}

.subtitle {margin: 15px 1px 5px 93px;}

.floatright {float:right;
position:relative;
bottom:30px;}

.fancyl {position:relative; /*absolute;*/
float:right; border:1px solid black;
}
</style>

</head>

<body>

<div id="container">
<div id="header"><h1>This is the header</h1></div>

<div id="menu">


<script type="text/javascript" src="menu/milonic_src.js"></script>
<noscript><a href="http://www.milonic.com/">JavaScript DHTML Menu Powered by Milonic</a></noscript>
<script type="text/javascript" src="menu/mmenudom.js"></script>
<script type="text/javascript" src="menu/menu_data.js"></script>



</div>

<div id="submenu">
<img src="images/smphilosophical.jpg" width="214" height="219" alt="The Academy" />
</div>

<div id="content">
<img class="title" src="images/tphilosophical.gif" width="328" height="29" alt="Philosophical Basics" />

<img class="subtitle" src="images/stmission.gif" width="73" height="22" alt="Mission" />

<p>Legacy Preparatory Academy builds the foundation of knowledge and critical thinking skills necessary for children to become independent learners for life.</p>
<h2 title="Our mission is to:" style="margin:30px 0 30px 75px;">Our mission is to:</h2>

<img alt="this is an image" class="fancyl" src="images/fancyl.gif" width="228" height="214" />

<ul>
<li>Provide a classically-based curriculum that is thorough and challenging</li>
<li>Integrate fine arts to enhance learning</li>
<li>Teach the value of public virtue to promote respect</li>
<li>Engage parents as real partners to share in enriching student education</li>
<li>Honor each child as an individual and foster their innate curiosity and desire to learn</li></ul>

</div>

</div>
</body>
</html>