MEGASITE FORUM [www.megasiteforum.tk] Trucchi, curiosità e consigli sul pc, e non solo! Download, pc help assistenza informatica aiuto computer, programmazione, calcio, basket, formula 1 e motori, divertimento, musica, tv & cinema, spazio per ragazze, notizie hi-tech e multimedia, games

Css - TIPS x la compatibilità fra i browser

  • Posts
  • OFFLINE
    S6uRoN
    Post: 3,100
    Gender: Male
    Admin
    UltraMegaSiter
    00 2/10/2005 8:39 PM
    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:
    Get Firefox!

    " ...when you look long into the abyss, the abyss also looks into you ... "


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

    [Modificato da S6uRoN 10/02/2005 20.40]

  • OFFLINE
    S6uRoN
    Post: 3,101
    Gender: Male
    Admin
    UltraMegaSiter
    00 2/10/2005 8:51 PM
    Box Model Hack
    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.
  • OFFLINE
    S6uRoN
    Post: 3,102
    Gender: Male
    Admin
    UltraMegaSiter
    00 2/10/2005 8:59 PM
    Dimensione minima x IE
    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
  • OFFLINE
    S6uRoN
    Post: 3,109
    Gender: Male
    Admin
    UltraMegaSiter
    00 2/11/2005 9:26 PM
    background-attachment: fixed per IE
    "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
  • OFFLINE
    S6uRoN
    Post: 3,110
    Gender: Male
    Admin
    UltraMegaSiter
    00 2/11/2005 9:37 PM
    Conditional comment
    <!--[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
  • OFFLINE
    S6uRoN
    Post: 3,117
    Gender: Male
    Admin
    UltraMegaSiter
    00 2/16/2005 10:50 PM
    Stransparent in IE [+ uso dei commenti]
    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
  • OFFLINE
    S6uRoN
    Post: 3,137
    Gender: Male
    Admin
    UltraMegaSiter
    00 2/22/2005 1:39 AM
    Traduzioni documenti W3c riguardanti il CSS
    http://www.diodati.org/w3c/html401/present/styles.html