[css] Differenze Explorer 6 - Firefox [msg lungo!]

**ernest** · 26-10-2004, 01:50

Ciao a tutti
Per fortuna ho trovato un forum abbastanza frequentato dove si discute di CSS. Spero sarete in grado di aiutami e che magari, quando più esperto, possa dare anch'io il mio contributo

Da poco mi sono convertito al webdesign "pulito" e standard basato su XHTML + CSS. Chiaramente i problemi ci sono ma uno ad uno li sto superando. Ora però sono ad un punto fermo da qualche giorno ormai: mi scontro con la differente resa tra i browser e probabilmente con i bug di Explorer.

Al sodo:
Mi piacciono molto i layout centrati, ampiezza fissa, con intestazione, due o tre colonne sottostanti e footer della stessa ampiezza dei precedenti. Mi sono messo a fare un sito e quando sono stato abbastanza soddisfatto della resa in Explorer, mi sono reso conto che in Firefox c'era un altro sito!

Questo è ciò che si vede in Explorer (gabbie del contenuto evidenziate) ed è più o meno ciò che vorrei si vedesse in tutti i browser:

mentre questo è ciò che si vede in Firefox:

Ho evidenziato i tre problemi che saltano all'occhio:
(1) Non so perché ma il background del div che contiene i due div di contenuto non li segue; inoltre le dimensioni e la posizione delle gabbie è abbastanza diversa
(2) La barra di navigazione è una lista CSS con effetto rollover. Ho calibrato l'altezza dei background e dei block in modo che 4 bottoni riempissero proprio l'altezza dell'elemento flash sulla sx; in Firefox i block risultano meno alti (o forse risultano più alti in Explorer) e così mi perdo un pezzo e salta l'allineamento dell'immagine sotto
(3) Il font dei bottoni viene reso diverso tra i due browser nonostante abbia settato la font-family.

Questa pagina si trova a questo link

La struttura della pagina è fatta così:

codice:

<body>

<div id="header">
[img]images2/logo_testo.jpg[/img]
</div>


<div id="nav">


<object ...etc. etc.... width="569" height="208" align="left">
  <param name="movie" value="....swf" />
  <embed src="....swf" width="569" height="208" loop="false" align="left"></embed>
</object>


<div id="list-menu">
  <ul>[*]Ingegneria Civile[*]Ingegneria Industriale[*]Ingegneria Informatica[*]Formazione[/list]
  [img]Grafica/bordino.gif[/img]
  </div>
</div>


<div id="main">
	<div id="main_left">
		<h2>Titolo colonna di sinistra</h2>
		

...</p>
  </div>
  <div id="main_right">
		<h2>Titolo colonna di destra</h2>
		

...</p>
  </div>
</div>

<div id="footer">
  

Footer
  </p>
</div>

</body>

Posto qui sotto la parte di CSS che descrive le gabbie:

codice:

body {
	margin: 0px;
	background: Silver;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 13px;
}

/*********** PAGE STRUCTURE ***********/

#header {
	background: white url(images/bordino_header.gif) no-repeat top;
	height: 40px;
	width: 730px;
	
	border-bottom-width: 16px;
	border-bottom-style: solid;
	border-bottom-color: #DCDCDC;
	margin: 30px auto auto;
	padding: 60px 15px 0px;
}

#nav {
	background: White;
	width: 760px;
	margin: 0 auto;
	padding-top: 2px;
}

#main {
	background: White;
	width: 744px;
	margin: 0 auto auto;
	padding: 8px;
	clear: both;
}

#main_left {
	width: 400px;
	margin: 0 15px auto 30px;
	padding: 8px;
	float: left;
	background-color: #F5F5DC;
}

#main_right {
	width: 230px;
	margin: 15 auto 20px;
	padding: 8px;
	float: left;
	background-color: #F0F8FF;
}

#footer {
	clear: both;
	background: White url(images/bordino_footer.gif) no-repeat bottom;
	width: 720px;
	padding: 20px 20px 15px 20px;
	margin: 0 auto;
	font-size: 0.8em;
}

mentre il menu è definito in:

codice:

#list-menu {
float: left;
width: 191px;
}

#list-menu ul {
margin: 0; 
padding: 0;
list-style-type: none;
} 

#list-menu li {
margin: 0px auto 0px auto;
} 

#list-menu a {
display: block;
width:173px;
height: 24px;

padding: 20px 8px 0px 10px;
background: url(images/sfondo_bottoni.jpg);
font: 11px Arial Helvetica sans-serif;
color: White;
text-decoration: none; /*lets remove the link underlines*/
text-align: right;
margin: 0px;
 border: 0px;;
} 

#list-menu a:link, #list-menu a:active, #list-menu a:visited {
font: 11px Arial Helvetica sans-serif;
color: White;
}

#list-menu a:hover {
font: 11px Arial Helvetica sans-serif;
color: White;
background: url(images/sfondo_bottoni.jpg);
background-position: -191px;
}

Ho letto in giro del differente box-model di Explorer rispetto allo standard ma non riesco a padroneggiare i suggerimenti proposti. Penso poi che questo non sia uno schema particolarmente complicato, quindi speravo di riuscire a sistemarlo facilmente ma sono ad un punto fermo.

Qualche consiglio?

P.S: Ho scritto un bel po'... grazie a quelli che hanno letto fin qua e moltissime grazie a quelli che vorranno aiutarmi

**Mich_** · 26-10-2004, 08:23

Non riesco a vedere le tue "immagini", per cui non riesco a capire bene.
Ho guardato la tua pagina con Moz 1.4, e vedo una cosa simmetrica, con le due colonne del main che rientrano un po` a sinistra e a destra.
C'e` solo una piccola sovrapposizione tra la riga bianca dell'header e le colonne, che non so se e` voluta.

Il colore della colonna destra e` molto simile al bianco, per cui l'effetto non e` dei migliori.

Un consiglio posso darti: tra i "link utili" di questo sito, ci sono alcuni link a siti che si occupano di formattare coni CSS. Il piu` importante e` forse constile.org . Li' ci sono anche i patch per IE per le piu` importanti strutture grafiche.

**Jerry Masslo** · 26-10-2004, 08:54

il div che non si allunga con le colonne in mozilla richiede un div o anche un br con clear:both prima di chiuderlo

per il resto ti sconsiglio sopratutto di usare caratteri in pixel non ridimensionabili in ie e se ti serve una struttura questi:

http://www.inknoise.com/experimental/layoutomatic.php

te la fanno come ti pare e poi la puoi personalizzare

**ernest** · 26-10-2004, 15:27

Posto qui sotto la parte di CSS che descrive le gabbie:

codice:

...

#main {
	background: White;
	width: 744px;
	margin: 0 auto auto;
	padding: 8px;
	clear: both;
}
...

Ho già messo il clear:both; nella definizione della gabbia principale che contiene le colonne ma non è servito a molto... o forse sono io che non ho capito come va aggiustata.

Nessun suggerimento sugli altri due problemi (2) e (3) ?

**jesus** · 26-10-2004, 15:49

Originariamente inviato da ernest
Ho già messo il clear:both; nella definizione della gabbia principale che contiene le colonne ma non è servito a molto... o forse sono io che non ho capito come va aggiustata.

Nessun suggerimento sugli altri due problemi (2) e (3) ?

codice:

<div id="main">
  <div id="main_left">
		<h2>Titolo colonna di sinistra</h2>
		

...</p>
  </div>
  <div id="main_right">
		<h2>Titolo colonna di destra</h2>
		

...</p>
  </div>
  <br style="clear: both;">
</div>

**Jerry Masslo** · 26-10-2004, 17:11

guarda che se nello stesso box usi width e padding avrai problemi di box model perché ie interpreta il codice a modo suo, sottraendo padding e border al width invece che sommarlo come dice lo standard e fanno i browser standard per ottenere l'ingombro totale

**Kintaro** · 26-10-2004, 17:25

Come dice Jerry, gran parte dei problemi che riscontri sono dovuti all'uso libertino che fai del padding e in parte del margin. Per carità niente di concettualmente errato, tuttavia IE ha il suo concetto personale di padding, quindi se vuoi costruire qualcosa di decentemente compatibile, i blocchi di alto livello devono necessariamente avere "padding: 0;" sempre e comunque. All'interno di quelli ci puoi mettere dei sottoblocchi eventualmente col padding. In sostanza non puoi usare il padding nei blocchi che necessitano di essere posizionati in un punto preciso.

Quindi ad esempio non <div>testo</div> con padding al div, ma eventualemnte <div>

testo</p></div> con div a 0 e p col pad.

A riprova di quello che ti sto dicendo controlla la pagina in IE 5.0 (usato da un buon 10% di gente) e spaventati.

Riguardo al problema 3:

font: 11px Arial Helvetica sans-serif;

Secondo me mancano semplicemente delle virgole... prova un po'...

Infine ti consiglio di sviluppare su Firefox e dopo di correggere in IE non il contrario ti risparmi molta fatica ti assicuro.

**aedo** · 26-10-2004, 17:37

[B]
Infine ti consiglio di sviluppare su Firefox e dopo di correggere in IE non il contrario ti risparmi molta fatica ti assicuro.

quoto!

**ernest** · 26-10-2004, 18:28

Ok mi pare siano venute fuori un bel po' di cose

[list=1][*]Usare sempre prima Firefox perché è standard compliant - a parte problema dell'altezza gabbie con float, che cmq si risolve con il <br style="clear: both;" />[*]Usare un doppio schema di gabbie per evitare i problemi di rendering differente tra Explorer 6 ed il resto del mondo: gabbie esterne con paddin = 0 per avere la width voluta e gabbie interne per il padding, dandolo come margin e quindi non preoccupandosi per la larghezza.[*]Explorer 5: ancora altri casini oltre ciò che vedevo io...[*]Nei CSS: non usare le scorciatioie con TopStyle Pro perché non mette le virgolette e ti sputtana i font con Mozilla e simili. Usare sempre il coding esteso font-family, font-size, etc.[/list=1]

Mi fa piacere che queste cose restino, io non le avevo chiare; messe così sembrano quasi una FAQ.

Resta ancora un'ultima cosa che vorrei risolvere: come tutta questa teoria si applica al menu col rollover? ho l'immagine di sfondo che viene traslata per evitare il flicker e ne conosco l'altezza: come fare il CSS, visto che il mio non funge?

Intanto grazie a quelli che mi hanno risposto

P.S: C'è qualche modo per controllare la resa delle pagine in altri browser, prima di tutti il famigerato IE5? Oltre a browsercam, che è a pagamento, s'intende...

**Kintaro** · 26-10-2004, 19:01

C'è qualche modo per controllare la resa delle pagine in altri browser, prima di tutti il famigerato IE5? Oltre a browsercam, che è a pagamento, s'intende...

Tutti i browser alternativi ad IE basta installarli perchè convivono. IE 5 e 5.5 non li puoi installare facilmente ma è possibile. Personalmente ho la fortuna di avere 2 pc con 2 versioni diverse di IE e ho obbligato la mia ragazza a mettere la terza (bastard inside).

Aggiungi questo alla FAQ: installare la Developer Toolbar su Firefox e goderne le funzionalità.

Discussione: [css] Differenze Explorer 6 - Firefox [msg lungo!]

Strumenti discussione

Ricerca discussione

Visualizza

[css] Differenze Explorer 6 - Firefox [msg lungo!]

Re: [css] Differenze Explorer 6 - Firefox [msg lungo!]

Re: Re: [css] Differenze Explorer 6 - Firefox [msg lungo!]

Re: Re: [css] Differenze Explorer 6 - Firefox [msg lungo!]

Permessi di invio