footer sempre in basso con tendine estendibili

[Ashry]

Ciao a tutti avrei bisogno di un aiuto per modificere il mio css in modo da far si che il footer si sposti on basso quando faccio comparire dei contenuti.
Mi spiego meglio, in una pagina ho 3 div nascosti (display:none) che vengono visualizzati al click su un pulsante tramite js. il problema è che quando faccio "comparire i box di testo" il footer non si sposta

javascript:

function Show_Stuff(Click_Menu,Click_bt1,Click_bt2) {
    if (Click_Menu.style.display == "none") {
        Click_Menu.style.display = "block";
    } else {
        Click_Menu.style.display = "none";
    }
    if (Click_bt1.style.display == "none") {
        Click_bt1.style.display = "block";
    } else {
        Click_bt1.style.display = "none";
    }
    if (Click_bt2.style.display == "none") {
        Click_bt2.style.display = "block";
    } else {
        Click_bt2.style.display = "none";
    }
} 

CSS:

html,body{margin: 0;padding:0;height:100%;}
body,td,th {
    font-family:Arial, Helvetica, sans-serif;
    font-size:69%;
    color: #333333;
    letter-spacing: 0px;
}
body {
    background-color:#394c61;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}

div#container{    position:absolute;
        left:50%;
        height: 100%;
        margin:0 0 0 -367px;
        width:732px;
        color:#333333;
        background-color:#c7c5c6;
        clear:both;
        }

body>div#container{height:auto;min-height:100%;}

#top{ text-align:right; 
    width:732px;
    height:209px;
    border:0px;
    }

#prodotti{ clear:both;}

.leftProdotti{
        display:block;
        width:254px;
        float:left;
        margin-top:30px;
        margin-bottom:30px;
        margin-left:40px;
        display:block;
        text-align:justify;
}

.rightProdotti{
        display:block;
        width:360px;
        float:left;
        margin-top:30px;
        margin-bottom:30px;
        margin-left:40px;
        display:block;
        text-align:justify;
}
.clear{ clear:both; 
        display:block; 
        height:10px; 
        font-size:3px;}
#separatore{ clear:both; 
        display:block; 
        height:10px; 
        font-size:3px;} 

HTML:

<div id="container">
  <div id="top"></div>
  <div id="linkList">
    <ul>
      <li class="li">MENU[/list]
  </div>
  <div id="prodotti">
    <div class="leftProdotti"> titolo </div>
    <div class="rightProdotti">
      <h2>details</h2>
      [url="javascript:Show_Stuff(display1,pullA,pullB)"][img]../_images/open01.jpg[/img][img]../_images/close01.jpg[/img][/url]
      <div id="display1" style="display: none">
        

box testo</p>
      </div>
    </div>
    <span class="clear"></span> </div>
  <div id="separatore"></div>
  <div id="footer">Footer</div>
</div> 

il doctype è transitional

Grazie
Ciao

[Mich_]

Non vedo lo stile per il blocco "#display1", e suppongo ci sia solo il display:none che viene trasformato in display:block dal JS.

Quindi hai un oggetto non-float dentro ad un oggetto float. Ci puo` stare, ma il tutto viene considerato float.
Poi non vedo il clear, che permetterebbe di forzare il footer a stare sotto il resto dei blocchi (c'e` uno <span id="clear">, che pero` non ha uno stile corrispondente, quindi e` come se non ci fosse).

In pratica la tua marcatura e` da rivedere, togliendo una serie di oggetti inutili.
Per il clear e come inserirlo, puoi vedere la pillola di fcaldera (la trovi con una ricerca nel forum o cercando tra i "link utili")

[Ashry]

Scusa mi sono dimenticata un pezzo nel #separatore però il clear ha uno stile e mi serve per inserire altri blocchi non mi sembra ci siano oggetti inutili...

#separatore{display:block;
    clear:both;
    height:3px;
    width:732px;
    font-size:3px;
    float:none;
    padding-bottom:40px;
    background-color:#c7c5c6;}

.clear{ clear:both; 
    display:block; 
    height:10px; 
    font-size:3px;} 

    <div class="leftProdotti"> titolo </div>
    <div class="rightProdotti">
      <h2>details</h2>
      [url="javascript:Show_Stuff(display1,pullA,pullB)"][img]../_images/open01.jpg[/img][img]../_images/close01.jpg[/img][/url]
      <div id="display1" style="display: none">
        

box testo</p>
      </div>
    </div>

    <span class="clear"></span> 

    <div class="leftProdotti"> titolo </div>
    <div class="rightProdotti">
      <h2>details</h2>
      [url="javascript:Show_Stuff(display2,pullC,pullD)"][img]../_images/open01.jpg[/img][img]../_images/close01.jpg[/img][/url]
      <div id="display2" style="display: none">
        

box testo</p>
      </div>
    </div>

    <span class="clear"></span> 

[Mich_]

Sono convinto che i JS postato funzioni nei browser IE (quirks mode), ma sono quasi certo che non hai provato in altri browser. Comunque ci sono errori nell'indirizzamento degli oggetti.

Quando usi i CSS, devi eliminare tutte le formattazioni HTML, altrimenti la risposta e` diversa a seconda del browser. Nel tuo caso i vari border="0" sono da eliminare (e spostare nel CSS).

Comunque se fossi in te, io procederei per gradi, in modo da separare il problema JS da quello CSS.
Quindi come primo passo:
1. eliminerei il JS, e lascerei i vari display:block dove deve apparire un oggetto
2. non userei il display:block dentro il link: quelle immagini dovrebbero restare di tipo inline

Quando il tutto e` a posto, procederei ad inserire il JS, ma con la tecnica moderna corretta, non quella ereditata dall'HTML 2.
Se fai le cose per bene, puoi anche passare ad XHTML 1.0 strict: ne guadagni anche in tempo di sviluppo (i validatori ti possono aiutare).

[Ashry]

si lo so che con firefox non va infatti stavo cercando una soluzione anche per quello ^-^
comunque:

Quando il tutto e a posto, procederei ad inserire il JS, ma con la tecnica moderna corretta, non quella ereditata dall'HTML 2.

per me questo è arabo, che significa con la tecnica moderna a questo punto non so dove andare a parare

[Mich_]

Questo e` un problema JS, che va affrontato in altro forum. In pratica hai fatto confusione tra oggetti: il name non e` la stessa cosa dell'id, e tu hai usato la tecnica che si usava in HTML2 con i name e l'hai applicata agli id. Comunque il problema JS si risolve anche (e forse piu` facilmente) dopo quello CSS. Quando hai risolto il primo, sposto la discussione su JS.

Come accennavo, esiste anche un problema CSS.
Chiaramente con la confusione che genera quel JS non riesci ad affrontarlo, e soprattutto devi testare in FF o altro browser diverso da IE, altrimenti non ne vieni a capo.

Quindi il primo passo e` fare (rifare da zero) la pagina con il blocco visualizzato, inserendo i float e i clear in modo corretto.