Scuola forum (scuo.la) - Forum di discussione per le scuole

Scuola forum (scuo.la) - Forum di discussione per le scuole (https://www.scuolaforum.org/)
-   Informatica (https://www.scuolaforum.org/informatica/)
-   -   CSS e differenze nell'interlinea e altezza riga (https://www.scuolaforum.org/informatica/57-css-e-differenze-nellinterlinea-e-altezza-riga.html)

Aalina 08-01-2007 03:30 PM

CSS e differenze nell'interlinea e altezza riga
 
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 (Messaggio 336)
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!


Tutti gli orari sono GMT +2. Attualmente sono le 12:15 PM.