Resa del testo nei differenti browser...

[goat]

Ciao,
ho creato un menù in linea di sette voci. Tutto funziona perfettamente, se non fosse che Safari mi visualizza il font leggermente più "allungato" rispetto a FF, IE e Opera. Questo causa un'eccessiva larghezza al mio menù.
C'è modo fi ovviare alla cosa?
E causato da come Safari renderizza il font?
Insomma, avere così grandi differenze nella lunghezza del menù principale tra un browser e l'altro... m'indispone non poco.
Grazie,
goat

[Puzzola]

senza poter vedere html e css è difficile dare dei pareri sensati...
La dimensione del testo la metti come pixel o come em?
Che font usi?

Così su due piedi, senza avere altre info ti direi di usare em come dimensione font e dimensione degli elementi del menu (spero non siano td...)

[goat]

Ciao,
le dimenzioni dei font le do in pixel. Il font è un semplice Arial.
Il menù orizzontale l'ho impaginato usando una lista, quindi le varie voci linkate sono inserite all'interno di[*].
Adesso provo a fare un po' di test con gli em al posto dei pixel, ma comincio a pensare che la cosa non sia risolvibile a causa del modo che ha di renderizzare i testi Safari.
goat

[goat]

Rabbia!
Se setto ai link font-size:0.9em; ecco che il menù su tutti i browser acquista praticamente la stessa lunghezza. Il problema adesso è che l'effetto fontweight:bold; non rende più su IE, FF e Opera, ma su Safari si.
goat

[Puzzola]

hai provato a mettere 700 invece di bold?

[goat]

Originariamente inviato da Puzzola
hai provato a mettere 700 invece di bold?

Si, il menù acquista la stessa lunghezza nei vari browser, ma l'effetto "bold" rende solamente in Safari.
goat

[Puzzola]

....boh...safari manco lo uso più sul mac...cerco di documentarmi...se trovo qualche info la posto...

semmai sto menu è visibile online?

[goat]

No, sto lavorando in locale.
Però di seguito posto il codice, così magari ne veniamo a capo:

<div id="nav">
    <ul>
        [*][url="#null"]il gruppo[/url]
        [*][url="#null"]attivit&agrave;[/url]
        [*][url="#null"]governance[/url]
        [*][url="#null"]responsabilit&agrave; sociale[/url]
        <li class="voci-dx">[url="#null"]investor relations[/url]
        <li class="voci-dx">[url="#null"]area media[/url]
        <li class="voci-dx no-margin">[url="#null"]lavora con noi[/url]
    [/list]        
</div> 

e questo il CSS:

#nav ul {width:auto;height:86px;margin:0px;padding:0px;list-style-type:none;float:right;}
#nav li {display:inline;margin:0px;padding:0px;text-transform:uppercase;}
#nav li a {padding:35px 19px;margin-right:1px;font-size:0.9em;font-weight:bold;text-decoration:none;color:#656664;background:#e6e7eb;}
#nav li a:hover {font-weight:bold;text-decoration:none;color:#000000;background:#dddee4;}
#nav li.voci-dx a {padding:35px 18px;margin-right:1px;font-weight:bold;text-decoration:none;color:#656664;background:#bcc4d1;}
#nav li.voci-dx a:hover {font-weight:bold;text-decoration:none;color:#000000;background:#a6b0c1;}
#nav li.no-margin a {margin-right:0px !important;} 

[Puzzola]

Provo a installare Safari sul PC (il mac è di là e poi lo usa mia moglie...)
Sennò non capisco cosa fa safari che non va...