Z-index no me funciona!

Me estoy haciendo un lio con z-index os incrusto el css i os cuento:

Código :

*
{
  margin: 0;
  padding: 0;
  font-family: Arial;
  font-size: 12px;
}

.clearer
{
  clear: both;
}

body
{
  background-color: #583D1F;
}

#container
{
  background: url('../images/bannerhome_01.jpg') no-repeat top left;
  width: 1000px;
  margin: 0 auto;
}

#header
{
  text-align: right;
  padding: 80px 80px 0px 0px;
  font-size: 13px;
  height: 30px;
  margin: 0 auto;
}

#header a
{
  border-bottom: 2px solid transparent;
  color: #362616;
  font-size: 14px;
  font-weight: bold;
  margin-left: 20px;
  padding-bottom: 1px;
  text-decoration: none;
  letter-spacing: -0.5px;
}

#header a:hover
{
  border-bottom-color: #C16609;
  color: #C16609;
}

#content
{
  margin: 0 auto;
  width: 807px;
}

#page
{
  position: relative;
}

#page_line
{
  background: url('../images/pageline.png') top left;
  width: 807px;
}

#page_up
{
  background: url('../images/pageup.png') no-repeat top left;
  width: 807px;
  height: 41px;
  z-index: 5;
}

#page_down
{
  background: url('../images/pagedown.png') no-repeat top left;
  width: 807px;
  height: 60px;
}

#footer
{
  padding-left: 10px;
  padding-right: 10px;
  margin: 0 auto;
}

#footer .line
{
  float: left;
  color: #FFFFFF;
  font-size: 12px;
  padding-top: 2px;
}

#footer .line_right
{
  float: right;
  color: #FFFFFF;
  font-size: 12px;
  padding-top: 2px;
}

#footer .line_right a
{
  color: #FFFFFF;
  text-decoration: none;
}

#footer .line_right a:hover
{
  text-decoration: underline;
}

#footer .line_right img
{
  border: 0 solid transparent;
  position: relative;
  top: 3px;
  margin-left: 5px;
  margin-right: 5px;
}

#text
{
  margin-left: 45px;
  margin-right: 25 px;  
}

#sub_menu
{
  position: relative;
  text-align: right;
  margin: 0 auto;
  right: 40px;
  top: 40px;
}

#sub_menu img
{
  border: 0 solid transparent;
}

#sub_menu .front 
{
}

#sub_menu .back 
{
  padding-left: 20px;
  float: right;
}

#sub_menu .front img
{
  z-index: 10;
}

#sub_menu .back img
{
  z-index: 1;
}

Lo que quiero hacer es mostrar por encima la propiedad #submenu .front (lo que quiero ver por encima es la imagen de ese div), mientras que la classe llamada back tiene que irse al fondo de todo.
Entonces tengo un cuerpo principal (se ve una libreta disenyada) donde se solapa este menu (echo con post-it), la pagina abierta se debe ver todo el post-it (classe front).
Todo esta bien cortado el unico problema es que no consigo esta disposicion, la libreta siempre se me ve en primer plano mientras que los post-its quedan detras (cuando el front no tendria que ser asi)

Que puedo hacer??

La regla z-index solo funciona en elementos posicionados (relative, absolute,etc); trata colocando un position:relative; donde estas usando los z-index y ve que te sale.

Perfecto me funciona en Firefox, en Safari/chrome pero no en explorer 7 (ni os cuento en explorer 6) como se llega a ver!!!

Que le sucede a explorer???

Código :

*
{
  margin: 0;
  padding: 0;
  font-family: Arial, Verdana, Tahoma;
  font-size: 12px;
}

.clearer
{
  clear: both;
}

body
{
  background-color: #583D1F;
}

#container
{
  background: url('../images/bannerhome_01.jpg') no-repeat top left;
  width: 1000px;
  margin: 0 auto;
}

#header
{
  text-align: right;
  padding: 80px 80px 0px 0px;
  height: 30px;
  margin: 0 auto;
}

#header a
{
  border-bottom: 2px solid transparent;
  color: #362616;
  font-size: 14px;
  font-weight: bold;
  margin-left: 20px;
  padding-bottom: 1px;
  text-decoration: none;
  letter-spacing: -0.5px;
  text-transform: uppercase;
}

#header a:hover
{
  border-bottom-color: #C16609;
  color: #C16609;
}

#content
{
  margin: 0 auto;
  width: 807px;
}

#page_line
{
  background: url('../images/pageline.png') top left;
  width: 807px;
}

#page_up
{
  background: url('../images/pageup.png') no-repeat top left;
  width: 807px;
  height: 41px;
  z-index: 5;
  position: relative;
}

#page_down
{
  background: url('../images/pagedown.png') no-repeat top left;
  width: 807px;
  height: 60px;
}

#footer
{
  padding-left: 10px;
  padding-right: 10px;
  margin: 0 auto;
}

#footer .line
{
  float: left;
  color: #FFFFFF;
  font-size: 12px;
  padding-top: 2px;
}

#footer .line_right
{
  float: right;
  color: #FFFFFF;
  font-size: 12px;
  padding-top: 2px;
}

#footer .line_right a
{
  color: #FFFFFF;
  text-decoration: none;
}

#footer .line_right a:hover
{
  text-decoration: underline;
}

#footer .line_right img
{
  border: 0 solid transparent;
  position: relative;
  top: 3px;
  margin-left: 5px;
  margin-right: 5px;
}

#text
{
  margin-left: 45px;
  margin-right: 25 px;  
}

#sub_menu
{
  position: relative;
  text-align: right;
  margin: 0 auto;
  right: 40px;
  top: 40px;
  padding-bottom: 80px;
}

#sub_menu img
{
  border: 0 solid transparent;
}

#sub_menu .front 
{
  padding-left: 20px;
  float: right;
}

#sub_menu .back 
{
  padding-left: 20px;
  float: right;
}

#sub_menu .front img
{
  z-index: 10;
  position: relative;
}

#sub_menu .back img
{
  z-index: 1;
  position: relative;
}

.tit
{
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
  margin-top: 7px;
}

BUeno con el css solo no puedo identificar el problema, pega tambien el html.

Ecco li, el HTML:

Código :

  <body>
    <div id="container">
      <a id="logo" href="index.html" title="home"></a>
      <div id="header">
        <a href="/geographic_2009/it/index.html">home</a>                              
        <a href="/geographic_2009/it/ristorante_it.html">ristorante</a>                                        
        <a href="/geographic_2009/it/top11_it.html">cocktail bar</a>                                        
        <a href="/geographic_2009/it/eventi_it.html">eventi</a>                                        
        <a href="/geographic_2009/it/gallery_it.html">gallery</a>                                        
        <a href="/geographic_2009/it/dove_siamo_it.html">dove siamo</a>                                        
        <a href="/geographic_2009/it/informazioni.html">contatti</a>                        
      </div>
      <div id="content">
        <div id="sub_menu">
          <div class="back">
             <a href="/geographic_2009/it/informazioni.html"><img title="informazioni" src="/geographic_2009/media/images/informazioni.jpg" alt="informazioni.jpg" /></a>
          </div> 
          <div class="back">
             <a href="/geographic_2009/it/prenotazioni_it.html"><img title="prenotazioni" src="/geographic_2009/media/images/prenotazioni.jpg" alt="prenotazioni.jpg" /></a>
           </div> 
           <div class="back">
              <a href="/geographic_2009/it/lavora_con_noi_it.html"><img title="lavora_con_noi" src="/geographic_2009/media/images/lavora_con_noi.jpg" alt="lavora_con_noi" /></a>
           </div> 
           <div class="front">
              <h1><img title="guestbook" src="/geographic_2009/media/images/guestbook.jpg" alt="guestbook.jpg" /></h1>
            </div>
          </div> 
        <div id="page">
          <div id="page_up">
          </div>
          <div id="page_line">
            <div id="text">
            <h2></h2>
            </div>
            <div class="clearer"></div>
          </div> 
          <div id="page_down">
          </div>
        </div>
      </div>