Come parificare l'interlinea in CSS fra i browser?


#1

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


http://www.righettofabrizio.com/punzonatrice-taglio-plasma.html
http://www.ghisirds.it/reggio-emilia.html
http://www.idee-regalo.biz/illusioni-ottiche.html
http://scuo.la/psicologia/


#2

con i font a quanto pare ci son 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, cmq se ci riesci fammi sapere che è un
problema comune anche se per ora grosso modo ho risolto.

Andrea


#3

stb wrote:

con i font a quanto pare ci son 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, cmq se ci riesci fammi sapere che � un
problema comune anche se per ora grosso modo ho risolto.

Andrea

ma come hai risolto?


#4

stb wrote:

prima di tutto ho definito i caratteri in pt e non in px, magari è
una mia impressione ma mi sembrano più regolari, poi ho cercato di
fare un design “universale” cercando di tenere le proporzioni, magari
con elementi dinamici per esempio un background fatto ad immagine
unica potrebbe dar problemi, spezzandolo dovresti risolverne alcuni

mi hanno suggerito che 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;
}

sembra tutto risolto, sperom!
grazie


#5

prima di tutto ho definito i caratteri in pt e non in px, magari è
una mia impressione ma mi sembrano più regolari, poi ho cercato di
fare un design “universale” cercando di tenere le proporzioni, magari
con elementi dinamici per esempio un background fatto ad immagine
unica potrebbe dar problemi, spezzandolo dovresti risolverne alcuni


#6

si quello lo so ma il rendering del carattere a me va sempre per i
fatti suoi, per impostare l’ interlina margini ecc c’è si il css, se
ti può aiutare guarda qua, hai le reference per tutti gli attributi,
sotto “Font” trovi quelli che ti servono.

http://www.w3schools.com/css/css_reference.asp


#7

Usare pt e px dovrebbe essere identico e mi sembra assurdo anche che il
monitor possa influire…
Con la dimensione del font controlli il carattere ed indirettamente la
linea, con line-height invece lo fai in maniera diretta e ci sono meno
possibilità di errori di interpretazione da parte del browser.
Comunque quando sei disperato puoi sempre utilizzare un css diverso, lo
fai da script, individui lo user agent ed includi quello per IE6
piuttosto che per il resto.
Altra considerazione: Opera ha un interpretazione dei css quasi
perfetta!!! Quindi puoi utilizzarlo come debug aggiuntivo quando le cose
non ti tornano.
Ciao