Salve a tutti,
prima di postare ho controllato la sezione "Link utili" per risolvere il mio problema, ma le indicazioni trovate non mi sono state d'aiuto: anche applicando un valore z-index negativo (-1) ai restanti div del mio layout (ovviamente tramite commento condizionale ad un .css specifico) il contenitore che reca grane di visualizzazione con IE6 non subisce variazioni di sorta.
Il codice della pagina è:
Il .css (base.css):codice:<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Base</title> <link href="base.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="banner"></div> <div id="footer"></div> <div id="boxcontenuti"> <div id="contenuti"> <div class="padcontenuti">Testo</div> </div> <div id="sx">contenuto sx </div> </div> </body> </html>
Il problema è il seguente:codice:html { border: 0; padding: 0; margin: 0; overflow: hidden; max-height: 100%; height: 100%; } body { background-color: #CCCCCC; font-family: "Lucida Grande", Arial, Verdana, Geneva, Helvetica, sans-serif; font-size: 11px; text-align: center; color: #000000; border: 0; padding: 0; margin: 0; overflow: hidden; height: 100%; max-height: 100%; } #sx { display: block; position: absolute; top: 0px; left: 0px; bottom: 0px; width: 170px; background-color: #920000; border: 0; padding:0; margin: 0; z-index: 3; } html #sx { height: 100%; } #footer { display: block; position: absolute; left: 0px; bottom: 0px; width: 100%; height: 50px; background-color: #006699; border: 0; padding:0; margin: 0; } html #footer { height: 50px; } #banner { position: absolute; top: 0px; left: 0px; width: 100%; height: 100px; background-color: #006699; border: 0; padding:0; margin: 0; } #contenuti { display: block; position: absolute; top: 100px; left: 170px; bottom: 50px; width: 830px; background-color: #FFCC66; z-index: 3; border: 0; padding:0; margin: 0; overflow-y: scroll; } .padcontenuti { padding-right: 20px; padding-left: 20px; height: auto; text-align: justify; } #boxcontenuti { width: 1000px; border: 0; padding:0; margin-left: auto; margin-right: auto; position: relative; } html #boxcontenuti { height: 100%; }
inserendo poco testo il div con proprietà overfow ("#contenuti") non si estende in altezza mentre, integrando corposi contenuti testuali, il div va a posizionarsi sopra il bottom ed oltre il margine inferiore della finestra del browser (come se non venisse riconosciuta la proprietà "bottom: 50px" (malgrado il posizionamento assoluto).
Inutile dire che Firefox, Opera, et cetera visualizzano correttamente la pagina.
Grazie in anticipo per qualsivoglia offerta di aiuto :)

Rispondi quotando