Visualizzazione dei risultati da 1 a 7 su 7

Discussione: css crossbrowser

  1. #1

    css crossbrowser

    ciao, e buon "CSS e XHTML" a tutti!
    ottima la pensata, personalemente io ne sentivo il bisogno...
    grazie

    sono alle prese con la costruzione di un sito che faccia usa dei css e si adatti alle versioni più recenti dei principali browser che mi pare di capire, secondo quanto spiegato nell'articolo CSS Crossbrowser, siano piuttosto simili nei comportamenti, come sembra dimostrato da questo script
    else if (document.getElementById){ //Netscape 6.x, Explorer 5 e 6, Opera 5 e 6, Mozilla
    document.write("<link rel='stylesheet' href='stile_dom.css' type='text/css'>");
    }

    "...affinchè i browser con supporto del DOM implementino lo stesso CSS..."
    ero sicuro quindi che questo css
    body {
    margin:0px;
    color:#1F1F7E;
    background-color:#00FF00;
    height: 100%;
    }
    #testata {
    margin:0px 230px 0px 0px;
    background-color:#FF0000;
    border-right:1px solid #000000;
    height:10%;
    }
    #main {
    margin:0px 230px 0px 0px;
    padding: 10px 0px 0px 0px;
    border-right:1px solid #FF0000;
    height:60%;
    }
    #image {
    position:absolute;
    top:0px;
    right:0px;
    width:229px;
    padding: 10px 0px 0px 0px;
    background-color:#00FFFF;
    height:70%;
    }
    #menu {
    margin:0px;
    border-top:1px solid #FF0000;
    background-color:#FFFF00;
    height:30%;
    }
    e questo html
    <head><title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/><link rel="stylesheet"" type="text/css" title="blue" href="style.css"></head>
    <body>
    <div id="testata">

    </p></div>
    <div id="main">

    </p></div>
    <div id="image">

    </p></div>
    <div id="menu">

    </p></div>
    </body>
    </html>
    si potessero adattare sia a IE che a Netscape ed Opera, ma potete vederne anche voi il risultato catastrofico...
    su IE6 è tutto ok ma per il resto un disastro...

    allora vi chiedo: dovè che sbaglio???
    solo alla stregua di un sogno mi troverò, e non vorrò più svegliarmi...

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Intanto i tuo div sono vuoti.
    Alcuni browser li cancellano dal DOM.
    Devi per forza metterci dentro qualcosa, se vuoi vedere un risultato.

    Altro problema.
    10+60+70+30 non fa 100.
    Quindi i tuoi <div> non stanno dentro il div esterno (che e` alto 100%). Devi contare anche eventuali brodi e padding.
    In tal caso i browser possono interpretare a modo loro.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  3. #3
    in realtà li ho svuotati per ridurre il testo...
    se testi il tutto in IE vedrai che tutto è ok...
    settando il div image al 70% in position absolute lo rendo della stessa altezza del div testata (10%) + il div main (60%)...

    solo alla stregua di un sogno mi troverò, e non vorrò più svegliarmi...

  4. #4
    Utente di HTML.it L'avatar di Francis87
    Registrato dal
    Jun 2003
    Messaggi
    5,970
    Originariamente inviato da cybergiaggia
    in realtà li ho svuotati per ridurre il testo...
    se testi il tutto in IE vedrai che tutto è ok...
    settando il div image al 70% in position absolute lo rendo della stessa altezza del div testata (10%) + il div main (60%)...

    non è una gran cosa creare un sito ottimizzandolo subito con IE... questo infatti non traduce il codice ma lo interpreta un po' come vuole... quindi è meglio provare con Mozilla all'inizio e poi rifinirlo
    Heaven's closed. Hell sold out.

    Linux 2.6.26-2-amd64
    Debian squeeze

  5. #5

    però nessuno mi dice nulla sull'articolo citato che pare accomunare gli scipt dei principali browser...


    ma no posso correggere in corsa quello già fatto? perchè gli altri browser non riconoscono i div?

    solo alla stregua di un sogno mi troverò, e non vorrò più svegliarmi...

  6. #6
    Utente di HTML.it L'avatar di Marcolino's
    Registrato dal
    May 2003
    residenza
    Udine
    Messaggi
    3,606
    Chi ti ha detto che nn riconoscono i livelli?

    E' solo che se usi IE che è sballato, poi fai un sito sballato, e a rimetterlo a posto hai voglia a correre perché perdere tempo?

    Mozilla e compagni non ti fanno vedere i livelli vuoti, perché non te li devono far vedere se vuoti.
    Se li vuoi lasciare vuoti e farli vedere, devi dargli un'altezza, che può essere minima (min-height che però nn funziona con quel catorcio di IE [c'è il trucco sì]) altrimenti li devi riempire con qualcosa, sempre che ci vada qualcosa.

    Quando realizzi un layout, testo, immagini e quanto altro, sono importanti per l'esito finale, come fai a toglierli e pensare di riuscire a capire come verrà fuori la pagina.
    E' come se uno stilista si mettesse a disegnare un abito, partendo dal tipo e colore della stoffa, ma senza pensare alla figura intera, non capirà mai come verrà fuori.

    Per il tuo problema specifico: che ne so come viene? Non dai un link completo, ma sopratutto da quel poco di codice che hai messo, manca completamente la struttura in javascript che dovrebbe modificare il foglio di stile in funzione del browser.
    Quindi non so se l'hai usata.

    Inoltre è un grosso errore appoggiarsi al javascript per fare una cosa simile, in quanto se uno ha il javascript disabilitato il tuo sito non funziona, in tal caso sei sicuro che il suo contenuto si capisca comunque? O viene fuori un'accozzaglia di roba?
    Se il tuo problema è il crossbrowsing con i fogli di stile, meglio affidarsi hagli hack o ad altri semplici trucchi noti.

    Per esempio per NN4:
    codice:
    <link rel='stylesheet' href='cosaNN4.css'> vale per tutti, quindi anche per NN$
    <style>
    @import url(cosa.css);
    </style>
    vale solo per i browser ultima generazione, perciò non per NN4
    Il trucco di cui sopra funziona sempre, in pratica NN4 legge il foglio di stile chiamato cosaNN4.css ma non carica quello dichiarato con import.
    Gli altri browser invece li caricheranno tutti e due, ma poi il secondo sovrascrive il primo annullandolo.

    Poi ovviamente ce ne sono tanti altri, ma la loro trattazione è lunga, ma nessuno usa il javascript.

  7. #7
    ok, forse sono stato poco chiaro...

    ho eliminato i contenuti solo per ridurre il testo all'interno del messaggio con cui ho aperto il thread...

    facevo riferimento all'articolo css crossbrowser (che tra l'altro riporta l'esempio "@import url") perchè sembra dire che sia sufficiente inserire questo script
    <SCRIPT language="JavaScript">
    <!--
    if (document.layers){ //Netscape 4.x
    document.write("<link rel='stylesheet' href='stile_netscape4.css' type='text/css'>");
    }
    else if (document.all && !document.getElementById) { // solo Explorer 4
    document.write("<link rel='stylesheet' href='stile_explorer4.css' type='text/css'>");
    }
    else if (document.getElementById){ //Netscape 6.x, Explorer 5 e 6, Opera 5 e 6, Mozilla
    document.write("<link rel='stylesheet' href='stile_dom.css' type='text/css'>");
    }
    //-->
    </SCRIPT>
    perchè tutto funzioni a meraviglia, ed accomuna con else if (document.getElementById) le versioni più recenti dei principali browsers... (Netscape 6.x, Explorer 5 e 6, Opera 5 e 6, Mozilla)

    sembrerebbe che con un unico foglio di stile (nell'esempio stile_dom.css) si possano risolvere tutti i problemi di incompatibilità...

    il codice che ho passato ci dice che ciò è vero a patto che poi si intervenga all'interno del css con trucchi vari, @import url, tantek celik, ecc... VVoVe:

    ora, questo è il mio codice completo di contenuti:

    html
    <head><title>testo</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <SCRIPT language="JavaScript">
    <!--
    if (document.layers){ //Netscape 4.x
    document.write("<link rel='stylesheet' href='stileN4.css' type='text/css'>");
    }
    else if (document.all && !document.getElementById) { // solo Explorer 4
    document.write("<link rel='stylesheet' href='stileIE4.css' type='text/css'>");
    }
    else if (document.getElementById){ //Netscape 6.x, Explorer 5 e 6, Opera 5 e 6, Mozilla
    document.write("<link rel='stylesheet' href='style.css' title="blue" type='text/css'>");
    }
    //-->
    </SCRIPT>
    <link rel="alternate stylesheet" type="text/css" title="blue" href="style.css">
    <link rel="alternate stylesheet" type="text/css" title="brown" href="style2.css">
    <link rel="alternate stylesheet" type="text/css" title="text" href="style3.css">
    <script type="text/javascript" src="styleswitcher.js"></script>
    </head>
    <body>
    <div id="testata">

    scegli uno stile
    [img]blue.gif[/img][img]brown.gif[/img][img]text.gif[/img]</p></div>
    <div id="main">


    ...........
    testo allineato bottom right

    </p></div>
    <div id="image">

    ... testo,
    testo.</p></div>
    <div id="menu"><div class="link">


    testo testo testo testo testo testo testo</p></div></div></body></html>
    css (style.css)
    body {
    margin:0px;
    font:11px verdana, arial, helvetica, sans-serif;
    line-height:18px;
    color:#0000FF;
    background-color:#00FF00;
    height: 100%;
    }
    #testata {
    margin:0px 230px 0px 0px;
    padding: 0px 10px 0px 10px;
    border-right:1px solid #0000FF;
    background-color:#0000FF;
    background-image:url(studiot.gif);
    background-repeat:no-repeat;
    background-position:top left;
    overflow: auto;
    scrollbar-face-color: #0000FF;
    scrollbar-highlight-color: #FF0000;
    scrollbar-shadow-color: #12124B;
    scrollbar-3dlight-color: #0000FF;
    scrollbar-arrow-color: #FF0000;
    scrollbar-track-color: #FF0000;
    scrollbar-darkshadow-color: #12124B;
    scrollbar-base-color: #0000FF;
    height:10%;
    }
    #testata p {
    font-size:9px;
    text-align:right;
    line-height:26px;
    color:#FF0000;
    }
    #main {
    margin:0px 230px 0px 0px;
    padding: 10px 20px 0px 40px;
    border-right:1px solid #0000FF;
    text-align:right;
    overflow: auto;
    scrollbar-face-color: #FF0000;
    scrollbar-highlight-color: #00FF00;
    scrollbar-shadow-color: #4D4DD5;
    scrollbar-3dlight-color: #FF0000;
    scrollbar-arrow-color: #00FF00;
    scrollbar-track-color: #00FF00;
    scrollbar-darkshadow-color: #4D4DD5;
    scrollbar-base-color: #FF0000;
    height:60%;
    position:relative;
    }
    #main p {position:absolute;
    bottom:10px;
    right:20px;
    }
    #main span {
    font:9px verdana, arial, helvetica, sans-serif;
    right:20px;
    }
    #image {
    position:absolute;
    top:0px;
    right:0px;
    width:230px;
    height:70%;
    padding: 10px 0px 0px 0px;
    background-image:url(rodin.jpg);
    background-repeat:no-repeat;
    background-position:bottom right;
    voice-family: "\"}\"";
    voice-family:inherit;
    width:230px;
    }
    body>#image {width:230px;}
    #image p {
    position:absolute;
    top:20px;
    right:5px;
    text-align:right;
    color:#0000FF;
    font-size:9px;
    line-height:12px;
    }
    #menu {
    margin:0px;
    padding:10px;
    border-top:1px solid #0000FF;
    background-color:#FF0000;
    background-image:url(studio.gif);
    background-repeat:no-repeat;
    background-position:center;
    height:30%;
    }
    #menu p {
    font-size:12px;
    text-align:center;
    color:#00FF00;
    }
    .link a:link {
    color:#0000FF;
    text-decoration:none;
    }
    .link a:active {
    color:#0000FF;
    text-decoration:none;
    }
    .link a:visited {
    color:#0000FF;
    text-decoration:none;
    }
    .link a:hover {
    color:#FFFFFF;
    text-decoration:none;
    }

    il risultato che vorrei ottenere è quello visibile in IE, quali correzioni vanno apportate per mozilla???
    solo alla stregua di un sogno mi troverò, e non vorrò più svegliarmi...

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.