Diverse misure in base ai browser

carlitos1982

Diverse misure in base ai browser

Salve ragazzi..
ho un problemino..praticamente con mozilla noto una certa distanza fra gli elementi della pagina mentre con ie noto una leggera differenza...come posso risolvere?
Mi pare se non sbaglio esiste un metodo per attribuire tramite i css diverse misure a seconda del browser...mi sto confondendo o esiste davvero questo metodo??

Grazie

greyfox

certo, usa la sintassi condizionale...esempio

.classe{

width:100px;
[if IE] width:200px;

}

oppure

[if ! IE 7] width:100%;

cerca su google css condizionale

alvin68

Un altro metodo, utilissimo per impostare diversi valori delle proprietà CSS per la visualizzazione diversa sui vari browser (non solo per IE, ma anche per Firefox, Opera, Google Chrome, Safari, ecc.), è via javascript.

Questo script, dello sviluppatore Rafael Lima, si chiama CSS Browser Selector (link di riferimento rafael.adm.br/css_browser_selector/ ).

A me ha risolto molti problemi.

carlitos1982

Salve,
ho provato cosi'..

.nick{

font-family : Verdana, Arial, sans-serif;
[if IE] font-size : 12px;
font-size : 22px;

text-decoration:none;

}
Come mai non succede nulla...il tutto rimane uguale..non avviene nessun cambiamento:?

Ho provato anche questo

{
height: 15px;
#height: 15px;
_height: 21px;}

La prima riga viene applicata a tutti i browser.

La seconda viene vista solo da Internet Explorer.

La terza viene applicata solo a Internet Explorer 6 o precedente.

}

Ma anche cosi'non mi effettua nessun cambiamento...come mai?

alvin68

Se vuoi il mio consiglio, io non userei hack.
Usa lo script che ho segnalato, è l'unico che mi ha risolto questi problemi, e non solo su IE.

carlitos1982

Scusami ho scaricato il file che mi hai detto..ora come va impostato ?

alvin68

A parte che mi sono accorto ora che nel tuo codice di prova postato precedentemente ci sono diversi errori di sintassi. Per forza non funzionava/cambiava nulla. Hai dichiarato la diversa dimensione del font mettendo le due misure sempre in IE. Ma devi prima stabilire la dimensione per tutti gli altri browser, e poi il cambiamento solo per IE.

Avresti dovuto scrivere:

.nick {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;

[if IE] font-size: 22px;
text-decoration: none;
}

Per quanto riguarda, invece, il metodo con javascript, nella pagina dell'autore che ti ho linkato ci sono tutte le spiegazioni. Metti il javascript in una cartella del sito, o anche nella root, e il rimando ad esso nella tua pagina html (fra i tag HEAD) sarà in quest'ultimo caso, secondo l'esempio dell'autore:

 
<script src="css_browser_selector.js" type="text/javascript"></script>

Poi, nel file CSS esterno imposti, a seconda del browser a cui ti vuoi riferire, le proprietà usando i tag specifici forniti dall'autore. Ad esempio, nel tuo caso:

 
.nick {
font-family: Verdana, Arial, sans-serif;
font-size: 12px; /* valore per tutti i browser */
}
 
.ie .nick {
font-size: 22px;
text-decoration: none; /* valore solo per tutte le versioni di IE */
}
 
.ie7 .nick {
font-size: 20px; /* valore solo per IE7 */
}
 
.ie6 .nick {
font-size: 18px; /* valore solo per IE6 */
}
 
.gecko .nick {
font-size: 16px; /* valore solo per Firefox */
}

Semplice, no?

carlitos1982

Semplicissimo..l ho provato e funziona alla grande...
il problema ora è per chi non ha javascript...giusto?

karedas

Ciao Carlitos1982

Non so se hai risolto ma magari il problema dipende semplicemente da un'errata impostazione degli attributi css.

Puoi darci una risorsa online su cui controllare?

alvin68

@carlitos1982 said:

Semplicissimo..l ho provato e funziona alla grande...
il problema ora è per chi non ha javascript...giusto?

Questo è un problema di scelte personali.
Oggi un sito web ha sempre un minimo di contenuti dinamici, e non si può fare a meno di qualche javascript.
Io, alla fine, preferisco ottimizzare il tutto in base alle necessità, e avvertire l'utente navigatore con relativo messaggio quando ha javascript disabilitato (ci sono vari metodi che trovi in rete).

Se vuoi usare solo CSS allora sembra, da quello che so, che il metodo del "css condizionale" non funzioni del tutto. A quel punto, devi semmai utilizzare il metodo dei "commenti condizionali per IE" (è cosa diversa, fai una ricerca in rete...), cioè inserire i commenti condizionali fra i tag HEAD del tuo html che richiamino fogli stile css specifici solo per il browser IE (tuttavia, poiché ogni versione di IE ha i suoi bug, capisci che sarai costretto a creare un css specifico per ciascuna versione di IE; una procedura troppo dispendiosa e scomoda, a mio parere).

Ma, poi, tutto dipende da ciò che uno deve fare, dallo scopo preciso. Ad esempio, se il problema è solo la differente distanza sui diversi browser dell'interlinea del testo, io adotterei altre strategie css, come l'aggiunta delle seguenti proprietà al body:

body {
font-size: 75%; /* uniforma il ridimensionamento del testo tra i diversi browser /
line-height: 1.5em; / uniforma l'interlinea del testo tra i diversi browser */
}