IE6 - problemi di visualizzazione

[alex.zeta]

Ciao,

non so proprio dove sbattere la testa.... Vi chiedo un input per risolvere questo problema:

Questo è Safari (mac), e va tutto bene:


Questo è Internet Explorer 6 (win), e si vede chiaramente che c'è un problema:


Tutti i pulsanti sono link con immagine di sfondo; sono dentro un div #masthead e tutti con float: left e clear: none.

I pulsanti catalogo e novità sono inseriti in un altro div #doppiobottone (anch'esso float:left) il quale è dentro lo stesso div #masthead.

Qualcuno riesce a capire il perchè del comportamento di ie6?

Attendo fiducioso... prima di ricominciare un pezzetto per volta..

Ciao!

Alex

[fcaldera]

senza codice da esaminare è obiettivamente difficile capire qual è il problema

Per iniziare
- gli elementi che hai flottato hanno una width definita?
- e il loro contenitore è abbastanza largo per contenerli tutti?
- hai usato dei margini sugli elementi con float?

[alex.zeta]

- gli elementi che hai flottato hanno una width definita?

si

- e il loro contenitore è abbastanza largo per contenerli tutti?

immagino di si.. masthead non ha impostata la larghezza

- hai usato dei margini sugli elementi con float?

no

Di seguito l'html:

<div id="container">
...
<div id="masthead">
	[img]images/intest1.jpg[/img]
	[img]images/intest2.jpg[/img]
	[img]images/intest3.jpg[/img]
	[img]images/intest4.jpg[/img]
	
	
	<div id="doppiobottone">
		 style="background-position: 0 0;"><% end if%>
		 style="background-position: 0 -20px;"><% end if%> >
	</div>
	
	
	
	
	[img]images/intest5.jpg[/img]
	[img]images/intest6.jpg[/img]
	[img]images/intest7.jpg[/img]
</div>

...
</div>

..e il css:

* {
	margin: 0;
}

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	background-image: url(images/sfondo.gif);
	background-repeat: repeat-y;
	background-position: center;
	font: small Verdana, Arial, sans-serif;
	background-color: #99CCFF;
}

#container {
	margin: 0 auto;
	padding: 0;
	margin-bottom: 20px;
	width: 770px;
	position: relative;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}
...

/* ------------- INTESTAZIONE */

#doppiobottone {
	float: left;
}

#masthead {
	background: yellow;
	border-bottom: 1px solid #555;
	margin-bottom: 10px;
	font-size: 0;
}

#masthead a.hp {
	background: url(images/butHP.gif) no-repeat bottom; 
	width: 90px; 
	height: 40px; 
	float: left; 
	clear: none; 
}

#masthead a.hp:hover { 
	background: url(images/butHP.gif) no-repeat top; 
} 

#masthead a.personaggio {
	background: url(images/butpersonaggio.gif) no-repeat bottom; 
	width: 90px; 
	height: 40px; 
	float: left; 
	clear: none; 
}

#masthead a.personaggio:hover { 
	background: url(images/butpersonaggio.gif) no-repeat top; 
} 


#masthead a.catalogo {
	background: url(images/butCatalogoNovita.gif) no-repeat ;
	background-position: 0 -40px;
	width: 90px; 
	height: 20px; 
	float: left;
	clear: none;
}

#masthead a.catalogo:hover {
	background-position: 0 0;
}

#masthead a.novita {
	background: url(images/butCatalogoNovita.gif) no-repeat ;
	background-position: 0 -60px;
	width: 90px; 
	height: 20px; 
	float: left;
	clear: left;
}

#masthead a.novita:hover {
	background-position: 0 -20px;
}

#masthead a.rivenditori {
	background: url(images/butrivenditori.gif) no-repeat bottom; 
	width: 90px; 
	height: 40px; 
	float: left; 
	clear: none; 
}

#masthead a.rivenditori:hover { 
	background: url(images/butrivenditori.gif) no-repeat top; 
} 

#masthead a.links {
	background: url(images/butlinks.gif) no-repeat bottom; 
	width: 90px; 
	height: 40px; 
	float: left; 
	clear: none; 
}

#masthead a.links:hover { 
	background: url(images/butlinks.gif) no-repeat top; 
} 

#masthead a.foto {
	background: url(images/butfoto.gif) no-repeat bottom; 
	width: 90px; 
	height: 40px; 
	float: left; 
	clear: none; 
}

#masthead a.foto:hover { 
	background: url(images/butfoto.gif) no-repeat top; 
} 

#masthead a.commenti {
	background: url(images/butcontatti.gif) no-repeat bottom; 
	width: 90px; 
	height: 40px; 
	float: left; 
	clear: none; 
}

#masthead a.commenti:hover { 
	background: url(images/butcontatti.gif) no-repeat top; 
} 

#masthead img.barraleft {
	float: left;
	clear: none;
}

#masthead img.barraright {
	float: right;
	clear: none;
}

#masthead img.barra {
	width: 770px;
}

Riguardo ai css ho ancora molto da imparare, e temo di aver fatto confusione da qualche parte..

Grazie per l'aiuto!

Alex

[alex.zeta]

up