IE ignora bottom

**DrLoki** · 08-06-2006, 12:02

Ciao a tutti, vi sottopongo il mio problema.
Innanzitutto il 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>Prova di posizionamento elastico</title>
<style>

</style>
</head>
<body>
<div id="sopra">INTESTAZIONE CON MENU</div>
<div id="foro">
<iframe name="foro" src="http://www.html.it" frameborder="0" height="100%" width="100%" allowtransparency="yes"></iframe>
</div>
<div id="sotto">FOOTER della pagina</div>
</body>
</html>

Quello che vorrei è avere una pagina elastica che posizioni sempre il div sopra sopra, il div sotto in fondo alla pagina e caricare nel div foro un IFRAME che permetta lo scorrimento in modo tale da avere un'unica barra di scorrimento nel div "foro" per la visualizzazione dio pagine lunghe.

Il codice funziona perfettamente con FF e Opera, mentre non ne vuole sapere di andare con IE, come al solito

In particolare non considera l'impostazione bottom=48px relativa al css del div foro.

Avete una soluzione da propormi.
Ciao e grazie

**DrLoki** · 08-06-2006, 12:47

Spulciando il web ho trovato una spiegazione interessante al fenomeno in questo sito.

In soldoni IE quando trova top(o right) non considera più bottom (o left).

Le soluzioni riportate non risolvono il problema.

**DrLoki** · 09-06-2006, 11:59

Con un po' di sano smazzamento ho trovato la soluzione al mio dilemma e per dovere di completezza la posto in seguito al thread che ho aperto.
Riassumendo il problema è dovuto al mancato funzionamento di bottom dopo un top o di right dopo un left.

Quindi il seguinte codice viene correttamente eseguito da FF, Opera, ecc, ma non da IE 6.

<!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>Box centrato</title>
<style type="text/css">

</style>
</head>
<body>
<div id="box">
<p style="vertical-align:middle">Questo centro dev'essere al centro della pagina

dentro un riquadro rosso</p>
</div>
</body>
</html>

L'unica soluzione possibile rimane quella di utlizzare delle espressioni all'interno del CSS che il nostro caro IE esegue.
Ecco dunque come deve essere corretto il CSS:

#box {
background-color:#FF0000;
position:absolute;
top: 100px;
height: expression(documentElement.clientHeight-200+"px"); /* per IE 6*/
bottom: 100px;
left: 100px;
width: expression(documentElement.clientWidth-200+"px"); /* per IE 6*/
right: 100px;
text-align:center;
vertical-align: middle;
}

Spero che la soluzione possa tornarvi utile.
Ciao.

Discussione: IE ignora bottom

Strumenti discussione

Ricerca discussione

Visualizza

IE ignora bottom

Permessi di invio