problema di cross-browser: caratteri visualizzati in maniera differente su IE

**Simone89RN** · 05-02-2012, 16:42

Ciao a tutti, sono alle prese con questa pagina web, ma nonostante utilizzi la proprietà
"font: 12px Verdana", la font-family non viene rilevata da Explorer che visualizza differentemente i caratteri.

Ecco il codice HTML e lo stile CSS:

codice:

<%@page contentType="text/html" pageEncoding="UTF-8"%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" http://www.w3.org/TR/html4/strict.dtd> 
<html>     
   <head>         
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">         
      <link rel="StyleSheet" href="style.css" type="text/css" />         
      <title>JSP Page</title>     
  </head>     
  <body>         
     <div class="container">             
        <div class="top">                 
           <h1>Il Calendario Maya</h1>             
        </div>             
        <div class="middle">                 
           <div class="navbar">                     
              <a>href="index.jsp">Home</a>                     
              <a>Login</a>                     
              <a>Registrazione</a>                 
           </div>                 
           <div class="status">                     
              

Utente loggato: simone</p>                     
              

Proveniente da: Terra Alta</p>                 
           </div>                 
           <div class="content">                     
              

La civilt&agrave; maya fior&igrave; nella zona del Centro America che si estende attualmente dal sud della Penisola dello Yucat&aacute;n fino all'Honduras e El Salvador passando per Guatemala e Belize. Gli archeologi dividono questa vasta area in due regioni: una a sud denominata &quot;terre alte&quot;, costituite dal sistema montuoso presente sul territorio guatemalteco e una regione a nord o &quot;terre basse&quot;, che comprende la foresta tropicale del Guatemala e Belize del nord e le zone pi&ugrave; aride della penisola dello Yucat&aacute;n. Il famoso Calendario Maya era composto da 5 periodi:</p>                          
                                           <ul>                             [*]20 giorni (prima cifra): uinal                             [*]360 giorni (seconda cifra, 18×20 = 360): tun                             [*]7200 giorni (terza cifra, 20×360 = 7200): k'atun                             [*]144000 giorni (quarta cifra, 20×7200 = 144000): b'ak'tun                             [*]la quinta cifra si ripete dopo il ciclo completo di 1872000 giorni (13×144000 = 1872000).                         [/list]
              

Il ciclo attualmente in corso, che secondo la mitologia maya &egrave; il quarto, &egrave; iniziato il 11 agosto 3114 a.C. ed &egrave; molto vicino al termine: il nuovo ciclo inizier&agrave; il 21 dicembre 2012. &quot;Per gli antichi Maya, si doveva tenere un'enorme celebrazione alla fine di un intero ciclo&quot; dice Sandra Noble, la executive director della Foundation for the Advancement of Mesoamerican Studies, Inc. a Crystal River in Florida. &quot;Rendere il 21 dicembre 2012 come un Giorno del giudizio o un momento di cambiamento cosmico&quot; dice &quot;&egrave; una completa invenzione e una possibilit&agrave; per molte persone di fare profitto&quot;.</p>                 
           </div>             
        </div>         
     </div>     
  </body> 
</html>

codice:

*{     
     margin: 0;     
     padding: 0; 
}  
html {     
     font: 12px Verdana;     
     color: #cccccc;     
     background-color: black; 
}  
div.container {     
     width: 80%;     
     margin-top: 20px;     
     margin-left: auto;     
     margin-right: auto;     
     background: url('maya.gif') no-repeat bottom right; 
}  
div.top {     
     height: 60px;     
     padding-top: 20px;     
     border-left: 3px solid #555555;     
     border-right: 3px solid #555555; 
}  
h1 {     
     font-size: 30px;     
     margin-top: 20px;     
     text-align: center; 
}  
div.content{     
     padding: 50px;     
     border-top: 3px solid #555555;     
     border-right: 3px solid #555555;     
     margin-right: 250px;     
     text-align: justify; 
}  
div.navbar{     
     float: right;     
     border-bottom: 3px solid #555555;     
     width: 230px; 
}  
a{     
     width: 230px;     
     height: 15px;     
     border-top: 3px solid #555555;     
     text-align: left;     
     display: block;     
     text-decoration: none;     
     color: #cccccc;     
     padding: 5px 0px; 
}  
a:hover{     
     background-color: #df0000;     
     height: 35px; 
}  
div.status{     
     width: 230px;     
     border-right: 3px solid #555555;     
     display: inline-block;     
     float: right;     
     clear: right;     
     padding: 20px 0px; 
}

Ho anche un problema di posizionamento dell'immagine di sfondo che in IE supera il bordo inferiore della navbar flottante a destra mentre in FF riesce a stare sotto il bordo, è proprio dovuto al fatto che i caratteri hanno una dimensione differente tra i 2 browser?

Grazie delle vostre risposte.

**Prill** · 05-02-2012, 18:45

Copiando il tuo css e provandolo mi pare che Explorer 9 riconosca il carattere, provato magari a settarlo su body invece che su html?

**Simone89RN** · 05-02-2012, 20:20

Ho provato a cambiare su body ma la visualizzazione rimane la stessa.

Ti posto le immagini degli screenshots e come dovrebbe essere visualizzata correttamente la pagina nei browser:

screenshotfirefox
screenshotexplorer
paginacorretta

Come potrai vedere anche l'immagine di sfondo dovrebbe essere molto più al di sotto della status e non dovrebbe arrivargli sotto da non vedere i 2 messaggi di login come accade nel mio codice, ma il content testuale a larghezza variabile non riesce a essere cosi lungo da mandare l'immagine di sfondo molto più sotto.

L'immagine è 250x242 di dimensioni, e le devo obbligatoriamente rispettare. Il posizionamento corretto è solo un problema di dimensioni, oppure c'è qualche errore a livello di CSS?

**ResianTaxidrive** · 06-02-2012, 21:47

guarda a me sembra uun normale Verdana con tutti i browser, forse se c'è una leggera differenza potrebbe essere data dall'antialias, può darsi che su un browser tu ce l'abbia impostato (di solito è IE) e su un altro no.
Guarda che l'immagine si sposta in base alla larghezza della tua finestra, più la stringi e più l'immagine scende perchè il container si allunga. Questo è dovuto alle dimensioni fluide dei tuoi contenitori.
Non so come potresti risolvere, dipende dall'effetto che vuoi ottenere, potresti ad esempio inserire l'immagine direttamente non come sfondo ma proprio come immagine e dargli un margin-top dai messaggi di login.
Oppure potresti semplicemente assegnare al content un padding-bottom più grande, tipo 90px; Con risoluzione 1024x768 tutto funziona, bisognerebbe vedere se va anche con uno schermo 16:9

**Simone89RN** · 07-02-2012, 02:50

Originariamente inviato da ResianTaxidrive
guarda a me sembra uun normale Verdana con tutti i browser, forse se c'è una leggera differenza potrebbe essere data dall'antialias, può darsi che su un browser tu ce l'abbia impostato (di solito è IE) e su un altro no.
Guarda che l'immagine si sposta in base alla larghezza della tua finestra, più la stringi e più l'immagine scende perchè il container si allunga. Questo è dovuto alle dimensioni fluide dei tuoi contenitori.
Non so come potresti risolvere, dipende dall'effetto che vuoi ottenere, potresti ad esempio inserire l'immagine direttamente non come sfondo ma proprio come immagine e dargli un margin-top dai messaggi di login.
Oppure potresti semplicemente assegnare al content un padding-bottom più grande, tipo 90px; Con risoluzione 1024x768 tutto funziona, bisognerebbe vedere se va anche con uno schermo 16:9

Allora riguardando l'immagine corretta, mi sono accorto che manca qualche padding in più per allungare il content in modo da far visualizzare l'immagine di sfondo più in basso (devo usarla obbligatoriamente come background-image).

I padding mancanti sono quello bottom nel div top che ho subito provveduto a inserire nel CSS senza problemi, e quelli bottom di 5px nelle righe del testo del content che ho messo dentro in paragrafi dando il padding-bottom ai paragrafi. I paragrafi danno lo stesso effetto che si vede nella pagina corretta però quando si riduce il browser l'effetto cambia e ovviamente si nota chiaramente la divisione delle righe in paragrafi che non è il mio scopo.

Vi posto anche l'immagine a finestra rimpicciolita:
pagina a finestra ridotta

Ho provato a inserire le righe anche dentro a degli span e settare i padding-bottom ma rimane tutto cosi com'è, per il resto non mi viene in mente nient'altro (le br non le posso usare). Che altro potrei fare?

**ResianTaxidrive** · 07-02-2012, 03:00

Scusa, non ho capito qual e' ora il problema. Non funziona tutto come dovrebbe?

Discussione: problema di cross-browser: caratteri visualizzati in maniera differente su IE

Strumenti discussione

Ricerca discussione

Visualizza

problema di cross-browser: caratteri visualizzati in maniera differente su IE

Permessi di invio