problema con css e firefox

[jos3ph]

Ho ultimato il sito lasciando perdere momentaneamente un problema di visualizzazione con firefox, ora devo consegnarlo e questa cosa la voglio sistemare ma non ne vengo a capo...

il sito lo potete vedere qua :

www.netdevel.it/imelda

con explorer (anche 7) tutto ok, la visualizzazione è corretta, con firefox il disastro, il riquadro centrale appare in alto a sinistra.....
ho controllato che tutti i <div> siano chiusi, e non è questo il problema (anche perchè ie è abb. schizzinoso su questa cosa...) penso sia un problema di css ma a questo punto dovrebbe presentarsi anche con ie......

mi viene da pensare a una qualche incompatibilità tra parametri nel css e firefox, ma non masticandone molto di css chiedo umilmente lumi a voi......

il problema si presenta in tutte le pagine del sito, e il css è unico per tutte le pagine, lo incollo qua così se ho commesso qualche cappellata evidente lo si vede subito:

html, body{
	margin:0;
	padding:0;
	text-align:left;
	background-color:#a8ba80;
}

#pagewidth{
	width:960px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}

#header{
	position:relative;
	height:140px;
	background-image:url(images/header.jpg);
	width:100%;
}

#leftcol{
	width:100px;
	min-height:417px;
	float:left;
	position:relative;
	background-color: #99cc66;
	background-image:url(images/spacer2.jpg);
}

#button-homepage{
	width:100px;
	height:88px;
	float:left;
	position:relative;
	background-color: #FFFFFF;
}

#button-dovesiamo{
	width:100px;
	height:83px;
	float:left;
	position:relative;
	background-color: #FFFFFF;
}

#button-camere{
	width:100px;
	height:81px;
	float:left;
	position:relative;
	background-color: #FFFFFF;
}

#button-tariffe{
	width:100px;
	height:83px;
	float:left;
	position:relative;
	background-color: #FFFFFF;
}

#button-contatti{
	width:100px;
	height:82px;
	float:left;
	position:relative;
	background-color: #FFFFFF;
}

#header2{
	position:relative;
	width:860px;
	height:46px;
	background-image:url(images/header2.jpg);
	float: right;
}

#content{
	position: relative;
	width:860px;
	background-image:url(images/background.jpg);
	min-height:371px;
	
}

#footer{
	height:2px;
	background-image:url(images/spacer.jpg);
	background-color:#FFFFFF;
	clear:both;
}

#footer{
	height:33px;
	background-image:url(images/footer.gif);
	background-color:#FFFFFF;
	clear:both;
}

#maintitle{
	font-family:verdana;
	font-size:24px;
	font-style:italic;
	color:black;
	font-weight:bold;
	text-align:center
}

#stdtitle{
	font-family:verdana;
	font-size:16px;
	text-decoration:none;
	color:black;
	font-weight:bold;
	text-align:center
}

#stdtext{
	font-family:verdana;
	font-size:16px;
	text-decoration:none;
	color:black;
	font-weight:normal;
	text-align:center
}

#homepagetext{
	font-family:arial;
	font-size:16px;
	font-style:italic;
	text-decoration:none;
	color:black;
	font-weight:normal;
	text-align:center;
}

#notes{
	font-family:arial;
	font-size:10px;
	text-decoration:none;
	color:black;
	font-weight:normal;
	text-align:right;
}

img.inset { float:left; margin: 0 0.5em 0 0.5em }

un grazie in anticipo a chi mi può dare una mano

ps: devo ancora ricomprimere le immagini per renderlo fruibile anche a chi si connette con 56K/gprs, se avete una connessione lenta aprite solo la home che tanto il problema è identico in tutte le pagine....

[fcaldera]

se togli position: relative da qui

#content {main.css (line 79)
background-image:url(images/background.jpg);
min-height:371px;
position:relative;
width:860px;

su FF si vede bene


su IE6 tutto il testo (senza questa modifica) è spostato sotto, ti risulta?

[jos3ph]

Originariamente inviato da fcaldera
se togli position: relative da qui

#content {main.css (line 79)
background-image:url(images/background.jpg);
min-height:371px;
position:relative;
width:860px;

su FF si vede bene

vero, tranne che per la pagina "camere". e cmq il problema non viene risolto del tutto. se noti ho messo un verde diverso fra lo sfondo della pagina e lo sfondo del riquadro dove finisce il testo, in ff il riquadro del testo finisce disallineato rispetto alla pagina, cosa che non accade con ie....

Originariamente inviato da fcaldera
su IE6 tutto il testo (senza questa modifica) è spostato sotto, ti risulta?

mi risulta, e non capisco perchè, su un ie6 tutto ok, su un altro ie6 di un altro computer, tutto il testo finisce sotto
...anche con la modifica...

[jos3ph]

no ok problema con firefox risolto, non avevo aggiornato correttamente la pagina.......

rimane il problema con ie6 che non riesco però a capire a cosa sia dovuto...

[fcaldera]

...non capisco perchè, su un ie6 tutto ok, ...

forse hai usato delle versioni standalone di IE6 (ovvero non di sistema) che però non danno nessuna garanzia sulla resa reale su IE6 di sistema. Nel mio caso ho guardato su IE6 di sistema.


Qualche suggerimento se posso

1) utilizza un doctype xhtml strict, altrimenti il box model su IE6 viene mal interpretato con conseguenze come quelle che stai constatando ora (naturalmente la pagina va validata per quella specifica DTD)

2) non utilizzare i div per qualsiasi cosa: ad esempio per il menu si usano le liste, per i testi ci sono i tag appositi

, per i titoli h1, h2 h3.... etc.

3) I div in pagina devono essere unici. Hai una decina di div con lo stesso id in quella pagina (id="homepagetext")

4) valign=top non ha alcun effetto su un div, lo puoi usare su elementi con display: table-cell o inline-block

[jos3ph]

Originariamente inviato da fcaldera
1) utilizza un doctype xhtml strict, altrimenti il box model su IE6 viene mal interpretato con conseguenze come quelle che stai constatando ora (naturalmente la pagina va validata per quella specifica DTD)

ho cambiato il doctype (solo a index.html) e non è cambiato nulla su ie6

Originariamente inviato da fcaldera
2) non utilizzare i div per qualsiasi cosa: ad esempio per il menu si usano le liste, per i testi ci sono i tag appositi

, per i titoli h1, h2 h3.... etc.

3) I div in pagina devono essere unici. Hai una decina di div con lo stesso id in quella pagina (id="homepagetext")

4) valign=top non ha alcun effetto su un div, lo puoi usare su elementi con display: table-cell o inline-block

non credo siano queste le cause del problema che hai riscontrato con ie6, credo sia ancora qualcosa nel css ma non riesco a capire dove...

[jos3ph]

ecco dov'era il problema: nel css non andava definito nessun parametro width per #content.
altrimenti sia firefox che ie6 che ie7 presentavano vari problemi.

l'ultimo problema che riscontro attualmente su ff e ie6 (e non su ie7) è che non mi riconoscono l'impostazione "min-height" che ho nel css, lo si nota chiaramente nella pagina "dove siamo".

che voi sappiate, ie6 e ff sono compatibili con questo parametro impostato nel css?

un grazie ancora!!!

[jos3ph]

Originariamente inviato da jos3ph
ecco dov'era il problema: nel css non andava definito nessun parametro width per #content.
altrimenti sia firefox che ie6 che ie7 presentavano vari problemi.

l'ultimo problema che riscontro attualmente su ff e ie6 (e non su ie7) è che non mi riconoscono l'impostazione "min-height" che ho nel css, lo si nota chiaramente nella pagina "dove siamo".

che voi sappiate, ie6 e ff sono compatibili con questo parametro impostato nel css?

un grazie ancora!!!