Css - TIPS x la compatibilità fra i browser

Min-height su explorer

esempio codice:

.box {
min-height: 200px;
height: auto !important;
height: 200px;
}




www.constile.org/tips/min-height/


Note: "height" in explorer si comporta esattamente come "min-height" standard. "!important" non è supportato da IE. Risultato: Mozilla e soci usano correttamente "min-height", mentre IE lo simula con la sua non corretta interpretazione di "height". Attenzione: controllate la pagina con i 2 browser, IE elabora il boxmodel in modo diverso quindi è facile che dobbiate diversificare i 2 valori di "min-height" e "height".

---

	Running on: Fedora Core 3 (Heidelberg) Ubuntu Linux 4.10 (The Warty Warthog)
" ...when you look long into the abyss, the abyss also looks into you ... "

~~~~~~~~~~
Crudeli Equipe

[Modificato da S6uRoN 10/02/2005 20.40]

http://css-discuss.incutio.com/?page=BoxModelHack

http://tantek.com/CSS/Examples/boxmodelhack.html

http://pro.html.it/articoli/id_413/idcat_8/pag_4/pag.html

http://archivist.incutio.com/viewlist/css-discuss/1793

Esempio codice

box{
width: 760px;
\width: 780px;
w\idth: 760px;
}

La prima è per i browser che non applicano l'escape ma implementano correttamente il Box Model (tipo Opera 5). La seconda è per Explorer 5.x: come si vede contiene un valore di 780px, in quanto alla larghezza definita con width dobbiamo sommare i 20px di padding dei lati sinistro e destro. La terza è per i browser standard compliant i quali sovrascriveranno il valore di 780px con la regola più vicina.

Oltre al primo esempio citato per l'altezza è possibile agire anche in questo modo.

Posto il codice in questo caso per la larcghezza minina:

<!--[if lte IE 6]>
<style type="text/css" >
div#container{width: expression(document.body.clientWidth <= 700 ? "700px" : "auto")}
</style>
<![endif]-->

Se la pagina è letta da IE eseguirà le istruzioni riporate all'interno dell'if. Mozilla e soci invece leggeranno l'istruzione:

div#container{min-width: 700px;}


Modificato da S6uRoN 12/02/2005 0.03

"background-attachment: fixed" in explorer è mal supportato. Può essere sfruttato facilmente nel body o nel caso in cui si forza lo scrolling della pagina con :

box{
overflow: auto;
width: 300px;
height: 150px;
}

http://www.quirksmode.org/css/background/background2.html

Per gli altri casi una soluzione può essere:


http://www.howtocreate.co.uk/fixedBackground.html


<!--[if IE]><script type="text/javascript">
function correctPosition(oElement,oPos,oWhich) {
while( oElement.offsetParent ) {
oPos -= oElement['offset'+oWhich];
oElement = oElement.offsetParent;
}
oPos += document.documentElement['scroll'+oWhich] ? document.documentElement['scroll'+oWhich] : document.body['scroll'+oWhich];
return oPos;
}
document.writeln( '<style type="text\/css">' );

//use document.writeln to put all CSS declarations in here, surrounded by " quotes
document.writeln( "box { background-position: expression( correctPosition(this,10,'Left')+'px '+correctPosition(this,20,'Top')+'px'); }" );

document.writeln( '<\/style>' );
</script><![endif]-->







Modificato da S6uRoN 11/02/2005 21.36

<!--[if IE 5.5]> per IE 5.5
<!--[if IE 6]> per IE 6
<!--[if gte IE 5.5]> per IE 5.5 e superiori
<!--[if lte IE 5.5]> per IE 5.0 e 5.5
<!--[if lte IE 6]> per versioni di IE dalla 5 alla 6


http://pro.html.it/articoli/id_522/idcat_8/pag_2/pag.html

In IE nn è possibile settare "transparent" perchè viene interpetato con un banalissimo nero.

Per porre in qualche modo rimedio presumendo di avere uno sfondo tendente al bianco possiamo fare così:

border: 1px solid transparent;
// border: 1px solid white; /* hack per IE */


Oppure

// border: 0;

I commenti "//" vengono eseguiti ugualmente da IE e quindi le regole verranno sovrascritte
Modificato da S6uRoN 16/02/2005 23.15

http://www.diodati.org/w3c/html401/present/styles.html