Background CSS box does not render in IE, but Firefox etc OK.

[Guest digitaltoast]

I've made some colourbars that should resize behind an image.Works fine in FF, but the CSS generated yellow bars are missing in IE6 and 7. The bars need to be css so they scale in width as the page is resized.I've tried all sorts of things such as changing the z-index.Even tried changing the png to gif as suggested elsewhere, but to no avail.I've been going round in circles for about a week.Any ideas gratefully received!

#logocenter {	float: left;	left: 180px;	margin-left: 5%;	position: absolute;	text-align: center;	top: 40px;	width: 25%;	z-index: 2;}#logoleft {	float: left;	width: 150px;}#logoright {	float: right;	width: 33%;}#yellowstripe {	background-color: #FFFF00;	color: #FF0000;	font-size: 1em;	font-weight: bold;	height: 10px;	left: 200px;	padding: 0.5em;	position: absolute;	top: 50px;	width: 70%;	z-index: 2;}#yellowstripe2 {	background-color: #FFFF00;	color: #FF0000;	font-size: 1em;	font-weight: bold;	height: 10px;	left: 200px;	padding: 0.5em;	position: absolute;	top: 80px;	width: 70%;	z-index: 2;}#yellowstripe3 {	background-color: #FFFF00;	color: #FF0000;	font-size: 1em;	font-weight: bold;	height: 10px;	left: 200px;	padding: 0.5em;	position: absolute;	top: 110px;	width: 70%;	z-index: 2;}

[S@m]

Did you try a postion:relative;instead of absolute?