resa testo crossbrowser all' interno <pre>

[alexforum]

ciao a tutti, uso il seguente codice css per inserire del testp preformattato all' interno di una pagina web

css
body {
margin:0;
font-family: "Trebuchet MS", Arial, Verdana;
font-size:0.90em;
color:#555555;
background:#FFFFFF;
text-align: center;
}
pre.code {
width: 98%;
overflow: auto;
margin: 20px auto;
padding: 0 0 16px 0;
font: 1.1em/1.4em "Courier New", Courier, monospace;
border-top: 1px dotted #666d4e;
color: #585858;
background: #e0e3d7;
}

code{
display: block;
margin: 0;
padding: 8px;
}

html:
<pre class="code"><code>
function test($var){
echo 'ciao';
if($var==22){
echo "$var = 22";
}
}
</code></pre>

il problema è che con opera 9.26, IE6 il font-size viene visualizzato pressochè uguale, con Firefox 2.0.0.6 il font-size risulta ad occhio più piccolo

avete qualche idea a riguardo?

grazie

[fcaldera]

hai settato il font-size a 1.1em

essendo un'unità di misura relativa questa si basa su una precedente definizione del font-size, fino trovare una unità di misura base

Se non hai definito un font-size base di default con un valore assoluto (ad es. in pixel o in punti) sarà usata quello nativo del browser, e su IE e Opera e leggermente più grande di Firefox

aggiungi una regola che resetti in modo omogeneo il font-size, ad es.

body {
font-size: 10px;
*font-size: 62.5% /* per IE con 16px di base (16*62,5% = 10px) e possibilità di ingrandire il testo */
}

nel tuo caso avevi settato font-size 0,9em che comunque vale circa 10,8px su FF e 14,4px su IE

[alexforum]

grazie per l' intervento, quindi non è possibile avere un font-size usando em uguale su Opera,IE,Firefox?

Avevo pensato che questa differenza fosse accentuata solo usando il tag <pre><code>codice</code></pre>

[fcaldera]

sì puoi averlo ma solo se a monte hai un font-size omogeneo e assoluto

esempio

body {
font-size: 10px;
*font-size: 62.5%;
}

pre {
font-size: 1.3em;
}


il testo di <pre> sarà di 13 px dovunque.