Problema con z-index

[Wing]

Hola, tengo unas cuantas imágenes de fondo que quiero que encajen y para eso necesitos que unas se superpongan a las otras.

Código:

#left{
	width: 52px;
	height: 681px;
	display: block;
	float: left;
	background: url(../img/left.jpg) no-repeat;
	z-index:18;
	margin-right: -52px;
	position: relative;
}

#right{
	width: 49px;
	height: 681px;
	display: block;
	float: right;
	background: url(../img/right.jpg) no-repeat;
	z-index: 12;
	margin-left:-49px;
	position: relative;
}


#menu{
	width:761px;
	height: 163px;
	background: #ffffff url(../img/menu_bkg.jpg) no-repeat top left;
	display: block;
	padding: 20px;
	z-index:20;
	position: relative;

}

El problema está en esos tres divs, left y right funcionan perfectamente, están por encima de otras capas pero el menu no hay manera que se posicione encima de ellos dos. En teoria el hecho de que ese div (menu) aparezca más tarde en el HTML no debería influir, no?
"Position: absolute" tampoco es una solución. Con relative z-index funciona perfectamente y esto tampoco me funciona con absolute.
No es un problema de navegador, no se ve bien en ninguno.

¿Alguien ve el problema?

[emiliodeg]

no deberia haber problema, si lo hay es pq esta fallando el navegador en la implementacion
busca otra forma de solucioarnlo para ese navegador en particular o utilizar algo de javascript

[Wing]

Falla en todos los navegadores (Firefox, IE7, IE8, Google Chrome...) así que no creo que sea un problema de implementación