martedì, agosto 07, 2007

Esempio di position fixed per IE

* Testato su IE6, Firefox 2.0.0.6 e Opera 9.2.
Ecco un esempio di come posizionare un box fisso in una pagina che scorre, dovrebbe funzionare con tutte le versioni di IE precedenti la 7, che invece dovrebbe avere il supporto per la normale proprietà CSS. Notare l'uso dei commenti condizionati per aggiungere il codice per IE, l'espressione "if lt IE 7" significa "se è inferiore a IE 7".

Vi ricordo questi due link utili:
Microsoft: About Conditional Comments
Microsoft: About Dynamic Properties

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
border: none;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:11px;
}
#fixed {
position: fixed;
top: 0;
left: 0;
z-index: 3;
border:1px solid black;
background:#ffff00;
padding:4px;
width:110px;
}
#box {
margin-left:120px;
border:1px solid black;
background: #B0C4DE;
padding:4px;
}
</style>

<!--[if lt IE 7]>
<style type="text/css">
html, body {
overflow: hidden;
}
#container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
overflow: auto;
}
#fixed {
position: absolute;
overflow: hidden;
}
</style>
<![endif]-->

</head>

<body>

<!--[if lt IE 7]>
<div id=container>
<![endif]-->
<div id="box">
INSERIRE TESTO CHE SCORRE
</div>
<!--[if lt IE 7]>
</div>
<![endif]-->

<div id="fixed">
INSERIRE TESTO BOX FISSO
</div>

</body>
</html>

Nota:
Anche per l'articolo precedente, dimenticavo di dire che IE 7 dovrebbe avere il supporto per min-width e max-width. Il problema è sempre lo stesso e cioè quante e quali configurazioni utente si vogliono supportare. Certo, sviluppare solo per le ultime versioni dei browser e magari solo per uno o due, diciamo Firefox e Opera, sarebbe l'ideale, anche se non sono esattamente identici. Per esempio Firefox non è attualmente conforme all'ACID2 test, mentre Opera si. E poi già, c'e' anche Safari. Il problema è che fino a pochi anni fa vivevamo in una monocultura MS-IE e tutti quanti sviluppavano solo o prevalentemente per quella. Basta frequentare qualche sito di homebanking per capire di cosa parlo.

Nessun commento:

Posta un commento