css crossbrowser

**cybergiaggia** · 08-10-2004, 11:51

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

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???

**Mich_** · 08-10-2004, 12:23

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.

**cybergiaggia** · 08-10-2004, 13:24

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%)...

**Francis87** · 08-10-2004, 14:25

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

**cybergiaggia** · 08-10-2004, 19:22

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?

**Marcolino's** · 09-10-2004, 09:40

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.

**cybergiaggia** · 11-10-2004, 10:43

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">

</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">

</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???

Discussione: css crossbrowser

Strumenti discussione

Ricerca discussione

Visualizza

css crossbrowser

Permessi di invio