Salve a tutti,
il problema è il seguente:
era mia intenzione creare un layout con il footer posizionato fisso al bottom ed una parte centrale di contenuti con scrollbar integrata nel div contenitore - abolendo invece lo scroll della finestra del browser (segue codice per delucidazioni).
La pagina viene correttamente visualizzata da Firefox, Opera, et cetera, ma non da Internet Explorer 6; accade infatti che, inserendo poco testo nel div con proprietà overfow ("#contenuti") questi non si estenda 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).
Finora le indicazioni trovate in merito non mi sono state d'aiuto: anche applicando un valore z-index negativo (-1) ai restanti div del mio layout (ovviamente tramite commento condizionale richiamante un .css specifico per IE6) il contenitore che reca grane di visualizzazione con IE6 non subisce variazioni di sorta.
Il codice della pagina è:
<!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 .css ("base.css"):
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%;
}
Grazie anticipate per qualsiasi eventuale offerta di aiuto :)