Forum->Flatnux->Differenze visive tra l'uso di Internet Explorer e Mozilla Firefox
  
Welcome Unknown Register Help383 Users

User Message


maroso

0 Level 0 10

levellevellevellevellevellevellevellevellevellevel
profile  home
Friday 19 November 2010 - 13:02

Differenze visive tra l'uso di Internet Explorer e Mozilla Firefox:
Mi domandavo come mai ci sono differenze a livello visivo (grafico) quando lo stesso sito viene visto con IE piuttosto che con Mozilla?

Qualcuno sa spiegarmi il motivo?

Nello specifico , il sito al quale sto lavorando : http://www.parcheggieconomici.com
visto in mozilla (il mio motore predefinito) risulta corretto, mentre in IE il titolo nel header si sovrappone al logo e si vede parzialmente e tutto ingrandito.

E' forse una questione di tema, oppure è un modo di interpretazione diverso nell'uso di browser differenti?

Grazie per le eventuali delucidazioni.



johndorazio

0 Level 0 10

levellevellevellevellevellevellevellevellevellevel
profile mail home
Friday 19 November 2010 - 16:35

Re: Differenze visive tra l'uso di Internet Explorer e Mozilla Firefox:
Internet Explorer utilizza un motore css molto vecchio un po' riadattato lungo gli anni, che non è del tutto conforme alle specifiche del cosiddetto box-model. Cerca di rattoppare dei bugs con dei workarounds che alla fine non rispettano mai del tutto le specifiche universalmente accettate. Invece Firefox e Chrome hanno dei motori di rendering css nuovi e quasi impeccabili.

Per esempio un'attenzione da avere sempre in Internet Explorer è quando si usa float, bisogna poi fare un "clear:both" sul elemento successivo per evitare che il float abbia effetto.
Altra cosa risaputa è che ogni browser interpreta le misure (grandezza, distanza) leggermente diverse, per cui una scritta può risultare leggermente più grande o più piccola a seconda del browser che usi. Ci sono modi per scrivere regole css in modo da raggirare questi ostacoli e avere tutto preciso in ogni browser, ma è un'operazione un po' faticosa.

Se posti un po' di codice forse è più facile analizzare il problema specifico.


____________________________
"The whole of science is nothing more than a refinement of everyday thinking." (Albert Einstein)



maroso

0 Level 0 10

levellevellevellevellevellevellevellevellevellevel
profile  home
Saturday 20 November 2010 - 09:12

Re: Differenze visive tra l'uso di Internet Explorer e Mozilla Firefox:
Ciao John e grazie della risposta, si vede che ne sai di programmazione web!

Tu vorresti vedere il codice CSS?

eccolo qui :


FONT {FONT-FAMILY: 'Lucida Grande', Verdana, Arial, Sans-Serif; FONT-SIZE: 12px}
TD {FONT-FAMILY: 'Lucida Grande', Verdana, Arial, Sans-Serif; FONT-SIZE: 12px; COLOR: #003159;}
BODY {FONT-FAMILY: 'Lucida Grande', Verdana, Arial, Sans-Serif; FONT-SIZE: 12px}
P {FONT-FAMILY: 'Lucida Grande', Verdana, Arial, Sans-Serif; FONT-SIZE: 12px}
DIV {FONT-FAMILY: 'Lucida Grande', Verdana, Arial, Sans-Serif; FONT-SIZE: 12px}
INPUT {BORDER-TOP-COLOR: #003159; BORDER-LEFT-COLOR: #003159; BORDER-RIGHT-COLOR: #003159; BORDER-BOTTOM-COLOR: #003159; BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 12px; BORDER-BOTTOM-WIDTH: 1px; FONT-FAMILY: 'Lucida Grande', Verdana, Arial, Sans-Serif; BORDER-RIGHT-WIDTH: 1px}
TEXTAREA {BORDER-TOP-COLOR: #003159; BORDER-LEFT-COLOR: #003159; BORDER-RIGHT-COLOR: #003159; BORDER-BOTTOM-COLOR: #003159; BORDER-TOP-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 12px; BORDER-BOTTOM-WIDTH: 1px; FONT-FAMILY: 'Lucida Grande', Verdana, Arial, Sans-Serif; BORDER-RIGHT-WIDTH: 1px}
SELECT {FONT-SIZE: 12px; FONT-FAMILY: 'Lucida Grande', Verdana, Arial, Sans-Serif;}
FORM {FONT-FAMILY: 'Lucida Grande', Verdana, Arial, Sans-Serif; FONT-SIZE: 12px}
A:link {BACKGROUND: none; COLOR: #003159; FONT-SIZE: 12px; FONT-FAMILY: 'Lucida Grande', Verdana, Arial, Sans-Serif; TEXT-DECORATION: underline}
A:active {BACKGROUND: none; COLOR: #003159; FONT-SIZE: 12px; FONT-FAMILY: 'Lucida Grande', Verdana, Arial, Sans-Serif; TEXT-DECORATION: underline}
A:visited {BACKGROUND: none; COLOR: #003159; FONT-SIZE: 12px; FONT-FAMILY: 'Lucida Grande', Verdana, Arial, Sans-Serif; TEXT-DECORATION: underline}
A:hover {BACKGROUND: none; COLOR: #7ba3c4; FONT-SIZE: 12px; FONT-FAMILY: 'Lucida Grande', Verdana, Arial, Sans-Serif; TEXT-DECORATION: underline}
.title {BACKGROUND: none; COLOR: #003159; FONT-SIZE: 14px; FONT-WEIGHT: bold; FONT-FAMILY: 'Lucida Grande', Verdana, Arial, Sans-Serif; TEXT-DECORATION: none}
.content {BACKGROUND: none; COLOR: #003159; FONT-SIZE: 12px; FONT-FAMILY: 'Lucida Grande', Verdana, Arial, Sans-Serif;}
.block-title {BACKGROUND: none; COLOR: #FFFFFF; FONT-SIZE: 12px; FONT-FAMILY: 'Lucida Grande', Verdana, Arial, Sans-Serif;}
.storytitle {BACKGROUND: none; COLOR: #003159; FONT-SIZE: 12px; FONT-WEIGHT: bold; FONT-FAMILY: 'Lucida Grande', Verdana, Arial, Sans-Serif; TEXT-DECORATION: none}
.storycat {BACKGROUND: none; COLOR: #003159; FONT-SIZE: 14px; FONT-WEIGHT: bold; FONT-FAMILY: 'Lucida Grande', Verdana, Arial, Sans-Serif; TEXT-DECORATION: underline}
.boxtitle {BACKGROUND: none; COLOR: #003159; FONT-SIZE: 12px; FONT-WEIGHT: bold; FONT-FAMILY: 'Lucida Grande', Verdana, Arial, Sans-Serif; TEXT-DECORATION: none}
.boxcontent {BACKGROUND: none; COLOR: #003159; FONT-SIZE: 12px; FONT-FAMILY: 'Lucida Grande', Verdana, Arial, Sans-Serif;}
.option {BACKGROUND: none; COLOR: #003159; FONT-SIZE: 12px; FONT-WEIGHT: bold; FONT-FAMILY: 'Lucida Grande', Verdana, Arial, Sans-Serif; TEXT-DECORATION: none}
.tiny {BACKGROUND: none; COLOR: #003159; FONT-SIZE: 8px; FONT-WEIGHT: normal; FONT-FAMILY: 'Lucida Grande', Verdana, Arial, Sans-Serif; TEXT-DECORATION: none}
.modtitle {background:none;color:#006666;font-size:14px;font-family:Tahoma, Verdana, Arial;font-weight:bold}
tr.thead td{font-weight:bold;color:#ffffff;background:#226666;border-bottom:1px solid #cccccc;padding:4px}
.lista td{padding:4px;vertical-align:top;}
tr.list1{background:#E0E0E0}
tr.list2{background:#EEEEEE}



grazie in anticipo.



johndorazio

0 Level 0 10

levellevellevellevellevellevellevellevellevellevel
profile mail home
Monday 29 November 2010 - 16:27

Re: Differenze visive tra l'uso di Internet Explorer e Mozilla Firefox:
Un errore che noto nel codice del tuo sito (utilizzando gli strumenti di ispezione di chrome) è che la cella nella parte superiore della pagina ha un "ccolspan" che dovrebbe essere "colspan":
<td ccolspan="2" style="vertical-align:top;text-align:center;font-family:Tahoma, Arial;font-weight:bold">
<h1 style="color:#ffffff">Parcheggi Economici - Il motore di ricerca per risparmiare</h1>
</td>


Siccome stai utilizzando l'immagine come immagine di sfondo della tabella, allora chiaramente quando il testo fa il "wrap" (scende sulla riga successiva) va a sovrapporsi all'immagine.

Tu ti chiedi perché in Firefox e Chrome il testo sta su una riga mentre in Internet Explorer scende sulla seconda riga. Il motivo è proprio perché i diversi browser interpretano diversamente le misure, le grandezze. Il testo "Parcheggi economici..." è racchiuso in un tag "h1", che rende una grandezza di testo diversa tra un browser e l'altro, per esempio in Chrome risulta una "grandezza computata" di 24px, mentre in Internet Explorer esaminando gli strumenti di sviluppo non vedo una regola precisa ereditata per gli elementi h1 né indica la grandezza computata. Prova a definire nella pagina dei stili una regola più precisa per gli elementi h1, oppure inline per quel singolo elemento h1. Vedo che già ha uno stile inline ossia:
<h1 style="color:#ffffff">Parcheggi Economici - Il motore di ricerca per risparmiare</h1>

Prova a definire meglio:
<h1 style="color:#ffffff;font-size:22px;">Parcheggi Economici - Il motore di ricerca per risparmiare</h1>

per esempio, e vedi se si risolve. Se invece in Internet explorer fa ancora il line-wrap, allora dovrai indicare regole diverse per internet explorer e per altri browser, magari nel foglio di stile, tipo così:

h1 { font-size: 20px; }
html>body h1 { font-size: 24px; }

Siccome IE non capisce la seconda regola, utilizza soltanto la prima. Invece tutti gli altri browser capiscono la seconda regola, per cui applicano la seconda sovrascrivendo la prima.

Fammi sapere se queste indicazioni risolvono.

____________________________
"The whole of science is nothing more than a refinement of everyday thinking." (Albert Einstein)



johndorazio

0 Level 0 10

levellevellevellevellevellevellevellevellevellevel
profile mail home
Monday 29 November 2010 - 18:21

Re: Differenze visive tra l'uso di Internet Explorer e Mozilla Firefox:
La soluzione che ho proposto non è ottimale nel senso che il testo è di grandezza fissa in questo modo, mentre sarebbe meglio che la grandezza del testo sia anche relativa alla grandezza della finestra. Per fare ciò si utilizzano i percentuali e gli "em" anziché le grandezze fisse in pixels. In chrome per esempio risulta che un elemento h1 è impostato con una grandezza di 2em, che nel contesto della tua cella risulta essere 24px perché il font-size nella cella è impostata a 12px.

Non sono sicuro in che modo IE tratta elementi quali h1; prova ad impostare esplicitamente la regola nel foglio di stile:
h1 { font-size: 2em; }

e vedi se risulta essere uguale anche in IE.
Se invece in Internet Explorer avviene ancora il line-wrap allora, similmente alla soluzione del post precedente, puoi definire regole specificamente per IE, tipo:
h1 { 1.8em }
html>body h1 { 2em }


Ti rinvio ad un articolo che spiega un po' di più al riguardo, anche se non entra in dettaglio per quanto riguarda specifici problemi dei vari browser: http://clagnut.com/blog/348/

____________________________
"The whole of science is nothing more than a refinement of everyday thinking." (Albert Einstein)

 [1] [2]