Ciao a tutti,
premesso che ho spulciato il forum, ma non sono riuscita a beccare la giusta risposta al mio problema, vorrei chiedervi un piccolo aiuto.
Io ho una pagina, generata in ruby on rails, con layout a colonna; quindi ho un container generale con all'interno un header, un body ed infine un footer.
Il css è stato settato seguendo le regole di un articolo di html.it per il quale è possibile raggirare il problema di internet explorer riguardo al fatto di avere il footer legato sempre in basso (
articolo html.it ).
Vi posto il codice del css:
Il mio problema sorge nel momento in cui nella pagina ho dei div a visualizzazione dinamica, attraverso effetti blindDown e blindUp. In quanto il footer rimane, in Internet Explorer , sovrapposto al contenuto del body che si espande con appunto l'effetto blindDown.codice:body, html{ margin:0 0 15px 0; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; background: #f3f3f3; font-size:11px; text-align:center; height: 100%; } /* Questo è il contenitore generale */ #cont{ margin: auto; text-align: center; width: 880px; position: relative; height: 90%; background-color: #fff; border-right: 10px solid #fff; border-left: 10px solid #fff; } body>div#cont{ height: auto; min-height: 100%; } /* Il container viene usato come contenitore dei contenuti del body, cioè della parte centrale del layout*/ #container{ position:relative; text-align:justify; width:880px; margin:0 auto; } #header{ width:880px; height:85px; margin:10px auto 15px auto; position:relative; background-image: url('/images/sf_header.jpg'); background-repeat: no-repeat; background-color: #00517c; border-top: 15px solid #fff; /*margin-bottom:15px;*/ } #footer{ margin-top: 30px; height: 25px; width: 880px; background-color: #00527F; margin: auto; position: absolute; bottom: 0; left: 0; }
Vi allego il codice html della pagina e due immagini esplicative del caso.
allego anche il files js per l'effetto blindDup e blindDowncodice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title>titolo</title> <link href="css/style.css" media="screen" rel="stylesheet" type="text/css" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/effects.js" type="text/javascript"></script> <script> function riposizionaFooter(){ } </script> </head> <body onload="instance_Draggable('errorExplanation');" > <div id="cont"> <div id="header"> [img]img/IMG.gif[/img] <h1>descrizione</h1> <div id="admin"> Benvenuto</div> </div> <div id="container"> <p style="color: red"></p> <p style="color: green"></p> <div id="menu"> <div id="tab_sx"> link </div> <div id="tab_dx"> </div> </div> <div id="contents"> <fieldset> <legend>Dati</legend> Nome: SubCo </p> Class manager: SubcoController </p> Versione corrente: 1 </p> </fieldset> Gruppi di workflow <table style="margin-top: 5px;"> <tr> <th>Nome gruppo</th> <th>Admin</th> <th>Crea pratica</th> </tr> <tr> <td>assegnazione</td> <td>Si</td> <td>No</td> </tr> <tr> <td>help_desk</td> <td>No</td> <td>No</td> </tr> <tr> <td>personale</td> <td>No</td> <td>No</td> </tr> <tr> <td>direction</td> <td>Si</td> <td>Si</td> </tr> </table> <div class="pulsante"> Indietro <a id="show_yml" onclick=' Effect.BlindDown(document.getElementById("YML")); document.getElementById("close_yml").disabled=""; document.getElementById("close_yml").className=""; document.getElementById("show_yml").disabled="true"; document.getElementById("show_yml").className="btn_disabled";'> Visualizza YML </a> <a id="close_yml" class="btn_disabled" onclick=' Effect.BlindUp(document.getElementById("YML")); document.getElementById("close_yml").disabled="true"; document.getElementById("close_yml").className="btn_disabled"; document.getElementById("show_yml").disabled=""; document.getElementById("show_yml").className="";' disabled> Chiudi YML </a> Carica nuova versione </div> </p> <div id="YML" style="display:none;"> <textarea rows="30" cols="50" readonly style="float:none; clear:both;"> ## YAML Template. #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml #Descrizione del file yml </textarea> </div> </div> </div> <div class="clear" style="background-color:#fff; height: 20px;"></div> <div id="footer"></div> </div> </body> </html>
effects.js
prototype.js
Grazie a tutti e lodi a chi trova la soluzione!!!
Rispondi quotando
