[css] come applicare foglio di stile in base al browser? (era: javascript per...)

15-09-2010, 22.11.01

Ciao a tutti,

ho trovato questo script javascript:

codice:

Codice HTML:

<script type="text/javascript"> <!-- if (document.layers){ //Netscape 4.x   document.write("<link rel='stylesheet' href='../css/firefox.css' type='text/css'>"); }  else if (document.all){ // Explorer   document.write("<link rel='stylesheet' href='../css/explorer.css' type='text/css'>"); }  else if (document.getElementById){ //Netscape 6.x   document.write("<link rel='stylesheet' href='../css/firefox.css' type='text/css'>"); }  //--> </script>

In poche parole questo script dovrebbe riconoscere il borwser usato dall'utente e dovrebbe attivare in base ad esso, i css corrispondenti per ogni borwser cosi da evitare che in ogni browser si veda diverso il sito.

Il problema è che questo script non si attiva, in oltre non saprei come mettere al posto di netscape 4 e 6, firefox e chrome per esempio.

Come potrei fare??

**darkwolf** · 15-09-2010, 22.19.03

Crea un css unico per i vari browser e, in caso di problemi con IE (solitamente con lui che servono i fix), usa un css separato o i vari "hack" che trovi in rete.

CSS:

Codice HTML:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="iehacks.css" />
<![endif]-->

Hack: http://www.javascriptkit.com/dhtmltu...sshacks3.shtml

16-09-2010, 14.51.53

Quindi l'inizio del mio html dovrebbe essere cosi?

Codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">                                      
<html>
<head>

<script type="text/javascript">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="explorer.css" />
<![endif]-->
</script>

e modificare il explorer.css in modo che si veda correttamente in explorer?

**darkwolf** · 16-09-2010, 14.57.04

Non è un javascript quindi devi togliere <script type="text/javascript"> </script>

16-09-2010, 15.03.43

Non funziona, potrei provare ad usare gli hack, ma quelli che mi hai postato su sono in inglese e sono per IE 6. Ne ho trovati alcuni in italiano per IE 5, non ci sono per IE 8 in italiano? oppure quelli di IE 5 vanno bene?

**darkwolf** · 16-09-2010, 15.11.08

Che vuol dire "non funziona"?

Deve funzionare. Così facendo indichi al browser un css per IE e non può "non funzionare".
---
Gli hack non sono in base alla lingua. La guida è in inglese ma puoi usarli anche su IE Giapponese per quanto ne so.

16-09-2010, 15.16.09

Questo è il codice HTML:

Codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">                                       <!--Obbligatorio-->
<html>
<head>


<!--[if IE]>
<link rel="stylesheet" type="text/css" href="../css/explorer.css" />
<![endif]-->




<meta http-equiv="title" content="Associazione">
<meta name="description" content="sito">
<meta name="Copyright" content="marco palazzoi">
<meta name="revisit-after" content="2 days">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="goccia">

<title> La Goccia </title><link rel="stylesheet" type="text/css" href="../Upload/css/bodybox.css"><link rel="stylesheet" type="text/css" href="../Upload/css/reset.css"> </head>     <!--Richiamo foglio Css applicato a tutta la pagina-->

<body lang="it" text="white" >

<div id="boxgenerale">

<a name="nome"></a>                                                                                         <!--*Nome per il richiamo: àncora-->

<div id="boxlogo" align="center">                                                                               <!--richiamo box1 (css)-->
<a href="../Upload/index.html">La Goccia</a></div>                                         



<div id="boxmenu">                                                                                             <!--richiamo box2 (css)-->
<a href="../Upload/index.html"><img border="0" src="../Upload/immagini/bottoni/HOME.jpg" alt="home"></a>   <br>                                                       
<a href="../Upload/pagina1/pagina1.html"><img border="0" src="../Upload/immagini/bottoni/chisiamo.jpg" alt="chi siamo"></a> <br><br>
<a href="../Upload/pagina2/pagina2.html">pagina 3</a> <br><br>



<a href="#nome">Torna a inizio pagina</a>  </div>                                                             <!--link di richiamo-->

<div id="boxcontenuto"><div id="immaginesottofondo"><img id="ridimensiona" src="../Upload/immagini/goccia.jpg" alt="goccia" width="600" height="560"></div>Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova perTesto di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova perTesto di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova perTesto di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova perTesto di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box Testo di prova per riempire il box. </div>

<br><br><br><br>

</div>

</body>
</html>

questo è il codice del file explorer.css

Codice:

body { background-color: white;
text-align: left;
                        }
    
#boxgenerale {
position: relative;
top: 80px;
left: 20px;
width: 60em;
height: 1000px;
margin: 0px auto;
border: 2px solid black;
background-color: #FFFFCC;
}
    
#boxlogo {
position: relative;
top: 50px;
left: 180px;
text-align: center;
width: 700px;
height: 80px;
border: 1px solid black;
}

#boxmenu{
position: relative;
top: 170px;
left: 60px;
width: 100px;
height: 200px;
border: 1px solid black;
padding: 20px;
}

#boxcontenuto{ 
position: relative;
top: -70px;
left: 300px;
width: 800px;
height: 800px;
border: 1px solid black;
color: black;
padding: 1px;
z-index: -1;
}

#immaginesottofondo{
    position: absolute;
    text-align: center;
    z-index: -1;
    padding: 0px;
    }

quando modifico il file explorer.css non si modifica nulla ne in IE ne in firefox.

**darkwolf** · 16-09-2010, 15.22.27

Tu hai indicato: ../css/explorer.css > http://solids.altervista.org/css/explorer.css (inesistente).
Devi puntarlo a: ../Upload/css/explorer.css > http://solids.altervista.org/Upload/css/explorer.css

16-09-2010, 15.30.37

si me n'ero accorto, ma continua a non funzionare, se cambio il foglio di stile explorer.css non cambia niente nel sito ne su IE ne FF. :S

**darkwolf** · 16-09-2010, 15.36.01

Su firefox, logicamente, trattandosi di un css esclusivo per IE, non può e non deve cambiare niente

SU IE, se lo hai applicato correttamente (io, nella tua index, non vedo il codice nel sorgente) deve funzionare.

16-09-2010, 15.42.07

io, inserendo questo codice a inizio pagina

Codice HTML:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="../Upload/css/explorer.css" />
<![endif]-->

modifico il file explorer.css per far si che quando lo apro con IE mi si vede diversamente. ma come faccio a modificarlo per firefox?

perche quando modifico il file bodybox.css che sarebbe quello generale senza specificazione, mi si cambiano entrambi :S

**darkwolf** · 16-09-2010, 15.46.59

Dal mio post:

Crea un css unico per i vari browser e, in caso di problemi con IE (solitamente con lui che servono i fix), usa un css separato

Un css per tutti e uno esclusivo con eventuali "ritocchi" per IE.

16-09-2010, 15.50.12

il css per tutti l'ho messo:

Codice HTML:

<link rel="stylesheet" type="text/css" href="../Upload/css/bodybox.css">

Pero se modifico questo, si modifica anche IE e se modifico il css per Ie non si modifica con IE. Eppure mi sembra di aver messo tutto al posto giusto :S

Discussione: [css] come applicare foglio di stile in base al browser? (era: javascript per...)

LinkBack

Strumenti discussione

Display

[css] come applicare foglio di stile in base al browser? (era: javascript per...)

Regole di scrittura