PNG in sovrapposizione: IE 6 non collabora

[Nikit]

Salve, io devo fare una cosa. Ho una PNG con trasparenze, una collina stilizzata.

La collina dovrebbe coprire in parte il bordo inferiore di 5 foto.

Codice html:

</div>
			<div id="gallerybb">
				<div id="bringin">
				</div>
				<div id="angelamasino">
				</div>
				<div id="camilla">
				</div>
				<div id="soleluna">
				</div>
				<div id="meridiana">
				</div>
				<div id="colline">
				</div>
			</div>

Ogni div corrisponde ad una foto.

Codice css:

#gallerybb{
text-align:center;
padding:0;
margin:0;
float:left;
height:267px;
width:900px;
background:#572a4b;
}
#colline{
padding:0;
margin:0;
width:900px;
height:69px;
position:absolute;
background: url(images/colline.png);
}
#bringin{
float:left;
height:151px;
width:151px;
background: url(images/fotobb/1bn.jpg);
}

Vorrei che il risultato finale fosse come l'allegato.

Purtroppo con il posizionamento assoluto e relativo sto avendo problemi con IE 6.

[Mich_]

C'e` un problema semantico, che si ripercuote sul posizionamento dei vari blocchi.

In poche parole, per sovrapporre due (o piu`) oggetti, questi devono essere posizionati (in linea di massima in modo assoluto).

Quindi la struttura deve essere del tipo:

<div id="gallerybb">
	<div id="immagini">
		[img]bringin.gif[/img]
		[img]angelamasino.gif[/img]
		[img]camilla.gif[/img]
		[img]soleluna.gif[/img]
		[img]meridiana.gif[/img]
	</div>
	<div id="colline">
		[img]colline.png[/img]
	</div>
</div>

A quel punto i div immagini e colline dovranno avere lo stesso posizionamento e stare sovrapposti con z-index opportuno. Ad esempio:

#gallerybb {
  position: relative;    /* altrimenti gli absolute interni non funzionano */
  width: ...;
  ...
}
gallery div {     /* formattazioni  comuni a colline e immagini */
  position: absolute;
  left: 0;
  top: 0;
}
#immagini { z-index: 10; }
#colline  { z-index: 20; }

#immagini img {
  width: ...;
  height: ...;
  float: left;
}

[Nikit]

Il problema qui sopra l'ho risolto.
Ora il problema è un altro.

Ho multiple IE installato, così provo su firefox, IE6 e IE7.
Con IE7 e FF nessun problrema, ma con IE6 ho un problema.

Non fate caso a quanto scritto sopra, è una cosa diversa ora, anche se riguarda sempre la PNG, il problema è con lo z-index.

Prima di tutto vi faccio vedere come si vede su IE7 e su FF, quindi correttamente:



E cosi invece si vede su IE6, quindi MALE:



Ora vi allego il codice che ho scritto, così vediamo se si risolve.
Magari è una sciocchezza e sono io che mi incasino inutilmente.

HTML:

<div id="gallerybb">
								<div id="gall">
					<div id="bringin" alt="Immagine Bad and Breakfast Cascina bringin" title="Bad and Breakfast Cascina Bringin">
					
					</div>
					<div id="angelamasino" alt="Immagine Bad and breakfast Angela e Masino" title="Bad and breakfast Angela e Masino">
					
					</div>
					<div id="camilla" alt="Immagine Bad and Breakfast Casa Camilla" title="Bad and Breakfast Casa Camilla">
					
					</div>
					<div id="soleluna" alt="Immagine Bad and breakfast SoleLuna" title="Bad and breakfast SoleLuna">
					
					</div>
					<div id="meridiana" alt="Immagine Bad and breakfast La meridiana" title="Bad and brreakfast La Meridiana">
					
				</div>
				</div>
			</div>
			<div id="colline">
			</div>

E ora il CSS:

#gallerybb{
text-align:center;
padding-left:45px;
margin:0;
float:left;
height:285px;
width:840px;
background:#572a4b;
}
#gall{
float:left;
position:relative;
z-index:1;
}
#colline{
float:left;
position:relative;
z-index:3;
padding:0;
margin-top:-150px;
width:887px;
height:69px;
background: url(images/colline.png);
}
#bringin{
margin:1px;
border:4px solid #aea010;
float:left;
height:151px;
width:151px;
background: url(images/fotobb/1bn.jpg);
}
#angelamasino{
margin:1px;
border:4px solid #aea010;
float:left;
height:151px;
width:151px;
background: url(images/fotobb/2bn.jpg);
}
#camilla{
margin:1px;
border:4px solid #aea010;
float:left;
height:151px;
width:151px;
background: url(images/fotobb/3bn.jpg);
}
#soleluna{
margin:1px;
border:4px solid #aea010;
float:left;
height:151px;
width:151px;
background: url(images/fotobb/4bn.jpg);
}
#meridiana{
margin:1px;
border:4px solid #aea010;
float:left;
height:151px;
width:151px;
background: url(images/fotobb/5bn.jpg);
}
/*--------------------------------*/
/*Links gallery*/
/*--------------------------------*/
/*----------------------*/
/*Cascina Bringin*/
/*----------------------*/
#gallerybb a.button1{
border:0;
display:block;
width:151px;
height:151px;
margin:0;
padding:0;
font:12px arial,helvetica,verdana,sans-serif;
text-align:center;
text-decoration:none;
color:#572a4b;
background: url(images/1.jpg) no-repeat 0 0
}

#gallerybb a.button1:hover{
background-position:0 -151px;
color:#fff;
}
/*----------------------*/
/*Angela e Masino*/
/*----------------------*/
#gallerybb a.button2{
border:0;
display:block;
width:151px;
height:151px;
margin:0;
padding:0;
font:12px arial,helvetica,verdana,sans-serif;
text-align:center;
text-decoration:none;
color:#286C98;
background: url(images/2.jpg) no-repeat 0 0
}

#gallerybb a.button2:hover{
background-position:0 -151px;
color:#fff;
}
/*----------------------*/
/*Casa Camilla*/
/*----------------------*/
#gallerybb a.button3{
border:0;
display:block;
width:151px;
height:151px;
margin:0;
padding:0;
font:12px arial,helvetica,verdana,sans-serif;
text-align:center;
text-decoration:none;
color:#286C98;
background: url(images/3.jpg) no-repeat 0 0
}

#gallerybb a.button3:hover{
background-position:0 -151px;
color:#fff;
}
/*----------------------*/
/*SoleLuna*/
/*----------------------*/
#gallerybb a.button4{
border:0;
display:block;
width:151px;
height:151px;
margin:0;
padding:0;
font:12px arial,helvetica,verdana,sans-serif;
text-align:center;
text-decoration:none;
color:#286C98;
background: url(images/4.jpg) no-repeat 0 0
}

#gallerybb a.button4:hover{
background-position:0 -151px;
color:#fff;
}
/*----------------------*/
/*Angela e Masino*/
/*----------------------*/
#gallerybb a.button5{
border:0;
display:block;
width:151px;
height:151px;
margin:0;
padding:0;
font:12px arial,helvetica,verdana,sans-serif;
text-align:center;
text-decoration:none;
color:#286C98;
background: url(images/5.jpg) no-repeat 0 0
}

#gallerybb a.button5:hover{
background-position:0 -151px;
color:#fff;
}

Qualcuno ha avuto problemi simili e ha già risolto?

Grazie infinite.

[lila89]

ie gestisce in modo diverso le spaziatura...(margini, padding e px,..).. guardando le immagini, penso che sia solo un problema di numero di px... se vuoi risolvere infretta, insersci la clausola !important; quasta viene letta solo da ff ie7 e altri browser e non da ie6;

per utilizzarla basta che metti il valore giusto con !important e sotto quello per ie6..

z-index: 30 !impostant;
z-index:15;

in qst modo otterrai che ie6 non è in grado di leggere !important e utilizzerà il valore z-index=15 mentre tutti gli altri leggeranno 30....