Z-index not cooperating

[harambeegirl]

My website is at www.anansisweb.comAs you can see from my masthead, the images are in front of the text. The images have a z-index of 1. The h1 and h3 text have a z-index of 2. Why is this happening?Here is my style sheet:(I also have the issue of that missing graphic and I have no idea why it won't load on the page when it loads in another location, but I might figure that out.)

/* CSS layout */body {	margin: 0;	padding: 0;	border: 0;	background-position: center center;	background-image: url('../images/spiderback6.jpg');	background-repeat: repeat;	background-attachment: scroll;	font-family: African;}/* Site Typography */h1, h2, h3, h4, h5, h6 {	font-family: African;	margin-bottom: 10px;	font-weight: lighter;	text-align: center;}h1 {	color: black;	font-size: x-large;	letter-spacing: 1px;	z-index: 2;}h3.h3red {	color: red;	font-size: large;	letter-spacing: 2px;	padding: 3px;	line-height: 14pt;	z-index: 2;	background-image:url('../images/spiderback11.gif')}h3.h3green {	color: #00CC00;	font-size: large;	letter-spacing: 2px;	padding: 3px;	line-height: 14pt;	z-index: 2;	background-image:url('../images/spiderback11.gif')}}p {	font-size: small;	line-height: 14pt;	font-weight: lighter;	color: black; 	font-family: African;}/* Links */a:link {	color: blue;	font-weight: lighter;	text-decoration: underline; 	line-height: 14pt;	font-size: small;}a:visited {	color: red;	font-weight: lighter;	text-decoration: underline; 	line-height: 14pt;	font-size: small;}a:hover {	text-decoration: underline; 	color: orange;	font-size: small;}a:active {	color: blue;	font-weight: lighter;	text-decoration: none;	line-height: 14pt;	font-size: small;}/* Site Divisions */#masthead {	position: relative; top: 0px; margin-left: 60px;	white-space: normal;	vertical-align: middle;	height: 125px;	width: 800px;	overflow: hidden;	padding: 20px;	border: 0;	text-align: center;	font-family: African;	font-style: normal;	text-indent: 0px;	letter-spacing: 1.75px;	background-position: center center;	background-repeat: repeat;	background-image: url('../images/spiderback11.gif')}#navmenu {	position: relative; top: 0px; margin-left: 60px;	text-align: center;	height: 70px;	width: 832px;	vertical-align: middle;	overflow: hidden;	padding: 5px 0px;	border: solid medium; 	border-color: red #00CC00;	background-image: url('../images/spiderback11.gif');}#container {	position: relative; top: 0px; margin-left: 60px;	vertical-align: middle;	float: none;	padding: 15px;	width: 810px;	height: 400px;		border: 0px;	background-image: url('../images/spiderback11.gif')}#maincontent.shortwidth {	overflow: scroll;	vertical-align: middle;	position: relative;	float: left;	width: 450px;	height: 380px;	background: #ffffff;	border: none;	padding: 10px;}#maincontent.longwidth {	overflow: scroll;	vertical-align: middle;	position: relative;	float: left;	width: 800px;	height: 380px;	background: #ffffff;	border: none;	padding: 10px 0px;}#rightsidebar {	overflow: scroll; 	vertical-align: middle;	position: relative;	float: right;	width: 300px;	height: 380px;	background: #ffffff;	border: none;	padding: 10px;	border: none;}#footer {	position: relative; top: 0px; margin-left: 60px;	overflow: auto;	vertical-align: bottom;	text-align: center;	width: 580px;	height: 95px;	padding: 10px 130px;	border: none;	background-image: url('../images/spiderback11.gif');}/* Images */img.hspace1 {	padding: 0px 30px;	border: none;	margin: 7.5px 0px;}img.hspace2 {	margin: 0px 10px;	border: solid 2px; 	border-color: #00CC00;}img.Gye{	position: absolute;	left: 80px;	top: 10px;	z-index: 1;}img.YeOhene{	position: absolute;	left: 255px;	top: 10px;	z-index: 1;}img.Nti{	position: absolute;	left: 440px;	top: 10px;	z-index: 1;}img.Ananse{	position: absolute;	left: 635px;	top: 10px;	z-index: 1;}/* Miscellaneous */ul {	font-size: small;	font-family: African;	font-weight: lighter;	line-height: 12pt;}

[Err]

green {	color: #00CC00;	font-size: large;	letter-spacing: 2px;	padding: 3px;	line-height: 14pt;	z-index: 2;	background-image:url('../images/spiderback11.gif')}}

From what I could see in your code, you have an extra closing bracket. That's probably what's throwing you off.Anyways, it looks like you sloved the problem.

[reportingsjr]

h1 {	color: black;	font-size: x-large;	letter-spacing: 1px;	z-index: 2;}h3.h3red {	color: red;	font-size: large;	letter-spacing: 2px;	padding: 3px;	line-height: 14pt;	z-index: 2;	background-image:url('../images/spiderback11.gif')}h3.h3green {	color: #00CC00;	font-size: large;	letter-spacing: 2px;	padding: 3px;	line-height: 14pt;	z-index: 2;	background-image:url('../images/spiderback11.gif')}}

Thats your problem.. in each of those you have to put position: absolute;It looks like the rest of the stuff has that though.. and the extra bracket.

[harambeegirl]

Thanks so much! That worked! Could I also ask if you would work magic with that annoying image that won't load? Thanks.