[cssdesign] Aiuto IE e liste a scompara

Mer 28 Dic 2005 10:55:30 CET

Salve a tutti e auguri di buon 2006.
Premettendo che sono un neofita dei CSS, vorrei sottoporvi una 
situazione strana che mi si e' presentata e vorrei chiedere se qualcuno 
di voi ha una soluzione.
Ho una pagina tableless con un header una colonna di sinistra un corpo 
centrale e un footer.
Nel footer sono contenuti 4 div dove all'interno sono presenti delle liste.
Il codice della pagina e' il seguente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Release 0.5</title>
    <script type="text/javascript">
        function init() {
            document.getElementById("ul_garanzia").style.display='none';
            document.getElementById("ul_azienda").style.display='none';

document.getElementById("ul_servizio_clienti").style.display='none';
        }

        function mostra_lista(swapLista) {
          var lista = document.getElementById(swapLista);
          var stato = (lista.style.display=='block' ? 'none' : 'block');
            lista.style.display = stato;
        }
    </script>
  </head>
  <body onload="init()">
    <div id="container">
      <div id="header">
        header
      </div>
      <div id="barra_sx">
        barra sx
      </div>
      <div id="content">
            content
      </div>
      <div id="footer">
        <div id="sicurezza">
          <img src="immagini/immagini_footer/logo_verisign.gif" 
alt="Veri Sign" width="98" height="101" />
        </div>
        <div id="garanzia">
          <a href="javascript:void(0);" 
onclick="mostra_lista('ul_garanzia')"><img 
src="immagini/immagini_comuni/piu_espandi.gif" alt="" width="11" 
height="11" /></a> GARANZIA<br />
          <div id="ul_garanzia">
            <ul>
              <li>Garanzia di vendita</li>
              <li>Privacy e sicurezza</li>
              <li>Soddisfatti o rimborsati</li>
            </ul>
          </div>
        </div>
        <div id="azienda">
          <a href="javascript:void(0);" 
onclick="mostra_lista('ul_azienda')"><img 
src="immagini/immagini_comuni/piu_espandi.gif" alt="" width="11" 
height="11" /></a> L'AZIENDA<br />
          <div id="ul_azienda">
            <ul>
              <li>Chi siamo</li>
              <li>Negozi</li>
              <li>Export</li>
              <li>Partners</li>
            </ul>
          </div>
        </div>
        <div id="servizio_clienti">
          <a href="javascript:void(0);" 
onclick="mostra_lista('ul_servizio_clienti')"><img 
src="immagini/immagini_comuni/piu_espandi.gif" alt="" width="11" 
height="11" /></a> SERVIZIO CLIENTI<br />
          <div id="ul_servizio_clienti">
            <ul>
              <li>Aiuto</li>
              <li>Come fare per</li>
              <li>Trasporto e pagamento</li>
              <li>FAQ</li>
              <li>Contattaci</li>
            </ul>
          </div>
        </div>
        <div class="separatore"></div>
      </div>
    </div>
  </body>
</html>

e questo e' il CSS:

html, body {
    margin: 0;
    padding: 0;
}
body {
    font:    normal 12px Arial;
    color: #585857;
    background-image:url(/immagini/background.gif);
    background-position:top right;
    background-repeat:no-repeat;
}
.separatore {
    clear:both;
}
div#container {
    position:absolute;
    background-image:url(/immagini/immagini_barra_sx/sfondo_barra_sx.gif);
    background-repeat:repeat-y;
    background-position:top left;
    background-color:#FFF;
    width: 776px; /* dimensione fissa */
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
}
/* header */
div#header {
    position:relative;
    background-color:#FFF;
    background-image:url(/immagini/immagini_barra_nav/barranav_sfondo.jpg);
    background-position:top right;
    background-repeat:no-repeat;
    border:1px solid #FFFFFF;
}
/* barra sinistra */
div#barra_sx {
    position:relative;
    padding:2px 2px;
    float: left;
    margin:0;
    border:0;
    width: 146px;
    text-align:left;
    border:0;
}
/* contenuto */
div#content {
    position:relative;
    margin-left:150px;
    padding: 0px 7px;
    border:0;
}
/* footer */
div#footer {
    background-image:url(/immagini/punto_verde.gif);
    background-position:top;
    background-repeat:repeat-x;
    background-color:#FFFFFF;
    text-align:center;
    clear:both;
    margin:0;
    padding-top:1px;
    padding-bottom:0px;
    width: 100%;
    border:0;
}
div#sicurezza, div#garanzia, div#azienda, div#servizio_clienti {
    position: relative;
    float: left;
    padding-top:2px;
    padding-bottom:0px;
    margin:0px;
}
div#sicurezza {    width:150px; }
div#garanzia, div#azienda, div#servizio_clienti {     width:208px; }
div#denominazione {
    text-align:right;
    background-color:#FFF;
    padding-top:10px;
    margin:0px;
}
ul {
    list-style-type:square;
    list-style-image:url(/immagini/immagini_comuni/lista.gif);
    text-align:left;
}

La funzione init() che viene richiamata sull'onload del body nasconde le 
3 liste presenti nel footer.
Cliccando poi sul link ritornano visibili.
Il problema e' che con Internet Explorer, quando tornano visibili, non 
mi visualizza l'immagine come punto della lista, ma il quadratino, come 
impostato di default.

Sapreste dirmi perche' ed eventualmente darmi una soluzione?

Grazie mille.
E ancora auguri

Giulio.