CSS Menu and background image PNG Transparency

programming web dev
1

So ok, I’ve got this going on right now, http://unangelic.org/stupidlogic/test/. The whole point is that the pop out menu will be above the content with the PNG alpha channel giving a drop down shadow look, like this http://unangelic.org/stupidlogic/test.jpg . Thing is when openend up in IE, the menu options gets pushed down, even though the menu underneath any active option has a Z-index greater than the active menu option. It works correctly in Firefox and Opera though. I’ve also tried using absolute positioning but from what I gathered it also didn’t work.

And the other problem is that the PNG is not transparent in IE. I’ve tried using http://www.alistapart.com/articles/pngopacity/ but it uses

objMyImage = new OpacityObject('foo','imgnamewithoutextension');
.
.
.
.
.
<div id='foo'></div>

and applying the background image imgnamewithoutextension.PNG as a transparent PNG for foo. The problem with that is that I use

#navigation ul li a:hover

pseudo class for the pop out thing. Any ideas on how to replace ‘foo’ in the javascript call with ‘navigation ul li a:hover’?

Index.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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />

</head>

<div id="navigation">
<ul>
	<li id="home"><a href="#"><em>home</em></a></li>
	<li id="solutions"><a href="#"><em>test</em></a></li>
	<li id="systems"><a href="#"><em>systems</em></a></li>
	<li id="security"><a href="#"><em>security</em></a></li>
</ul>
</div>
<ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

</body>
</html>

Stylesheet.css

#navigation ul {
	list-style-type: none;
}
#navigation ul li#home {
	height: 80px;
	width: 210px;
	background-image: url(images/Untitled-1_02.png);
	z-index: 6;
	background-repeat: no-repeat;
}
#navigation ul li#solutions {
	height: 80px;
	width: 210px;
	background-image: url(images/Untitled-1_02.png);
	z-index: 7;
	background-repeat: no-repeat;
}
#navigation ul li#systems {
	height: 80px;
	width: 210px;
	background-image: url(images/Untitled-1_02.png);
	z-index: 8;
	background-repeat: no-repeat;
}
#navigation ul li#security {
	height: 80px;
	width: 210px;
	background-image: url(images/Untitled-1_02.png);
	z-index: 9;
	background-repeat: no-repeat;
}
#navigation ul li em {
	visibility: visible;
	height: 80px;
	width: 210px;
	font-style: normal;
	font-family: Geneva, Arial, Helvetica, san-serif;
	font-size: 30px;
	color: #FFFF00;
	top: 20px;
	position: relative;
	left: 30px;
}
#navigation ul li a:hover {
	height: 280px;
	width: 420px;
	background-image: url(images/Untitled-1_04.png);
	display: block;
}
#navigation a {
	height: 80px;
	width: 210px;
	display: block;
	text-decoration: none;
}
#navigation {
	height: 1000px;
}