CSS e differenze nell'interlinea e altezza riga

Aalina · 08-01-2007, 03:30 PM

Ciao.

Sarò breve: come si fa a far combaciare l'altezza della riga e dell'interlinea di un testo in modo che compaia esattamente identico fra tutti i browser?

Ho notato differenze in particolare quando visualizzo una pagina con firefox2 ed explorer6: il secondo aumenta lo spazio.

E' una piccolezza, però se voglio far ben incastrare il testo con delle immagini, questa differenza è fastidiosa...

Si può risolvere facilmente, magari senza l'utilizzo dei commenti condizionali?

Grazie

giovanni · 08-01-2007, 05:22 PM

Penso d'aver capito cosa intendi poichè molte volte è capitato anche a me.
Stai usando il css vero?
Purtroppo explorer 6 fa quello che vuole. Molti possono confermarlo. Anche se a volte tutto è scritto come dio comanda potrebbe non visualizzarsi a dovere su esploder.
Ti consiglio di non tribolare troppo sul 6 , tra poco tutti avranno il 7 e chi adopererà il 6 si arrangerà.
Sai quanti problemi di classi ignorate, padding e margini sfasati ho avuto? Ed anche per gli interlinea, ecc ecc ...
Se il tuo sito è complesso e vuoi farlo funzionare perfettamente anche sotto il 6 avrai parecchio da sclerale.
Il 6 non supporta un fico di una trasparenza, i bug sono TROPPI.
Perchè morire dietro ad un affare fatto con il c..o?

ps: anche il 7 In alcuni casi si fa bellamente i fatti propri ... ma almeno su quello tutto deve funzionare a modino!

andrea · 08-01-2007, 07:01 PM

Con i font a quanto pare ci sono parecchi problemi perchè vengono
renderizzati in vettoriale: non penso che riuscirai a farli identici
per tutti i browser!
Da quanto ho capito molto dipende anche dal monitor oltre che dal browser, comunque se ci riesci fammi sapere che è un problema comune!

Cinzia · 08-01-2007, 07:10 PM

Ciao scuola,
l'altezza della riga può essere impostata nel CSS con l'attributo line-height, per controllare lo spazio fra un paragrafo e l'altro si può far invece ricorso a margin-top e margin-bottom, esempio:

h3 {
line-height: 15pt;
margin-bottom: 2px;
margin-top: 2px;
}

Vedi se risolvi.

Aalina · 08-02-2007, 03:26 PM

E infatti ho risolto: non pensavo si potessero applicare i margini al testo.
Grazie mille

matteo · 08-02-2007, 03:27 PM

Ciao,
hai già provato con la proprieta' "line-height" dello style ? se lo applichi da foglio di stile ad un elemento generico come ad esempio "body" ce l'hai in cascata su tutte le pagine/div (ovviamente se non vai a sovrascriverlo per quel particolare tag)...

ps: meglio anche se imposti la grandezza e il font del carattere uguale altrimenti cmq potrebbe non andarti bene...

federico · 08-02-2007, 03:44 PM

Quote:

Originariamente inviata da Aalina

E' una piccolezza, però se voglio far ben incastrare il testo con delle immagini, questa differenza è fastidiosa...

Ok, ma una volta che sei riuscito ad ottenere l'allineamento tra testo e immagini, che succede quando l'utente modifica la dimensione del testo?

Se non vuoi usare i commenti condizionali, puoi usare gli hack per nascondere certe regole CSS ad Internet Explorer, tipo:

codice:

/* regola per IE */
p {
    line-height:1.6em;
}

/* regola per gli altri browser */
body > p {
    line-height:1.8em;
}

Però per utilizzare questo hack devi identificare due elementi, un contenitore (da usare al posto di "body") e uno che ne sia discendente diretto (da usare al posto di "p").

Questo hack però non funziona più in IE7, probabilmente ce ne sono altri, in ogni caso i commenti condizionali sono la soluzione più pratica.

Maia · 08-03-2007, 01:21 AM

ciao,

purtroppo IE6 ha un modo tutto suo di interpretare spazi e margini, puoi provare a forzare l'interlinea direttamente, ad esempio:

codice:

p {
line-height:12px;
}

ma tenendo sempre presente che un modo per far apparire il testo identico in tutti i browser non esiste (a meno di utilizzare immagini al posto del testo): anche fra stessi browser ma diversi sistemi operativi la visualizzazione è diversa... si può solo cercare di utilizzare font standard per fare in modo che siano il più simili possibile

Agostino · 08-05-2007, 12:04 PM

Dovrebbe essere un problema di interpretazione del codice CSS da parte dei vari browser. Quello più attendibile, e "onesto" a livello anche di certificazione W3C (mi pare) credo sia Firefox, quindi basa i tuoi codici sulla visualizzazione di quest’ultimo. IE6 non è esattamente il massimo, ora con IE7 invece dovrebbe già andare meglio, in quanto si sono "fregati" dei pezzi di codice da Firefox e, quindi, la situazione ora dovrebbe essere quasi pareggiata...

Gregorio · 08-05-2007, 12:06 PM

Il testo non comparirà mai “esattamente” identico tra tutti i browser perché comunque, anche a parità di css, c'è anche un rendering dei font differente a seconda del browser.
In particolare, Firefox (sia su win che su mac) tende a rendere i font leggermente più piccoli rispetto agli altri browser, e su questo non ci si può fare assolutamente nulla!

duccio · 08-06-2007, 02:50 PM

Secondo me dovresti creare un design più elastico, in modo che anche se ingrandisci i caratteri con cmd +, riesci ad avere un sito "gestibile".
Io lo uso spesso se ho gli occhi stanchi!

Michael · 08-08-2007, 02:49 PM

Explorer 6 ha dei comportamenti bizzarri, una soluzione possibile potrebbe essere quella di resettare tutti i valori dei tag prima di ridefinirli. A volte risolve qualcosa. L'alternativa è il doppio foglio di stile... non è pratico da aggiornare, ma risolve velocemente la questione.

Ti copio incollo un file reset che ho trovato utile:

codice:

 /* Reset default styles across browsers---------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
cite,code,em,strong,th{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
th{text-align:left;}
h1,h2,h3,h4{font-size:100%;}
q:before,q:after{content:'';}

/* Set uniform base font size ---------------------------------------- */
body{font:13px 'Trebuchet MS',verdana,sans-serif;*font-size:small;}
table{font-size:inherit;font:100%;}
select,input,textarea{font:99% 'Trebuchet MS',verdana,sans-serif;}
pre,code{font:115% monospace;*font-size:100%;}
body * {line-height:1.22em;}

e nel caso ti servisse, ti incollo anche la dichiarazione condizionale!

codice:

 <style type="text/css" media="screen">@import "style/style.css";</style>
    <!--[if IE 6]> 
    <style type="text/css" media="screen">@import "style/ie6.css";</style>
    <![endif]-->
    <!--[if IE 7]>
    <style type="text/css" media="screen">@import "style/ie7.css";</style>
    <![endif]-->

Ciao!

Misha · 09-01-2007, 10:08 AM

Solitamente uso una sezione css "undo" per togliere tutti i settaggi custom di ogni browser. E poi riparto a definire le proprietà. Così funziona!

Discussioni simili
Discussione	Ha iniziato questa discussione	Forum	Risposte	Ultimo messaggio
Yamaha WR250F: vantaggi, svantaggi e differenze fra annate	marco	Auto, Moto, Motori	1	02-17-2010 07:35 PM
AUTOCAD e differenze tra la versione del 2000 e quelle più recenti?	Isabel	Informatica	1	12-02-2009 08:51 AM
Togliere riga su immagini da power point	ilavol	Informatica	0	11-19-2009 10:57 AM
Descrivere le differenze tra una foto di ieri e una di oggi	Matteo91	Inglese	1	03-12-2009 11:45 AM
Come eliminare in modo semplice, una riga d'un foglio Excel	giulio	Informatica	3	07-09-2007 02:59 PM

Menu

CSS e differenze nell'interlinea e altezza riga