RÉSOLU - Problème d'affichage d'un div dans un div

Bonjour! Je suis relativement nouveau sur ce forum. Je suis en apprentissage du CSS.

Voici mon problème. J'ai fait un div "conteneur" qui contient plusieurs div.
Ce div "conteneur" a une image de fond blanche transparente à 70% (un png) qui se répète.

Ensuite, dans j'ai inséré un div qui s'occupe du texte, puis des divs flottants qui affichent des icônes. Pour une raison qui m'échappe, le fond transparent ne s'applique que pour le 1er div et ce, dans FF. Dans IE 6, le fond est blanc pour tous les divs (sans la transparence, bien ententu).

Voici le code:

#cc-col1 {
	width: 410px;
	vertical-align: top;
	}
			

#cc-col1-transport {
	margin-top: 1px;
	padding: 0;
	width: 410px;
	background-image: url(../images/fond_blanc_transparent.png); 
	background-repeat: repeat;
	}
			
#cc-col1-infotransport {
	padding: 5px;				
	}
						
#cc-col1-imagestransport {
	float: left;
	margin: 0;
	padding: 8px ;
	text-align: center;
}

cc-col1-transport est le div "conteneur" ici.
Puis, dans la page, j'ai mis:

<table border="0" cellspacing="0" cellpadding="0">
	<tr>
	<td id="cc-col1">
		<div id="cc-col1-transport">			
			
		<div id="cc-col1-infotransport">	
		<p>Les balades suggérées ci-dessous peuvent être parcourues…</p>
		</div>
					
		<div id="cc-col1-imagestransport">
		<img src="../images/icone_auto.png" alt="en auto" width="36" height="31" class="image"/>
		<h4>En auto</h4>
		</div>
					
		<div id="cc-col1-imagestransport">
		<img src="../images/icone_pied.png" alt="à pied" width="36" height="31" class="image"/>
		<h4>À pied</h4>
		</div>
					
		<div id="cc-col1-imagestransport">
		<img src="../images/icone_velo.png" alt="en vélo" width="36" height="31" class="image"/>
		<h4>En vélo</h4>
		</div>
					
		<div id="cc-col1-imagestransport">
		<img src="../images/icone_roller.png" alt="en roller" width="36" height="31" class="image"/>
		<h4>En roller</h4>
		</div>
					
		<div id="cc-col1-imagestransport">
		<img src="../images/icone_train.png" alt="en train" width="36" height="31" class="image"/>
		<h4>En train</h4>
		</div>
					
		<div id="cc-col1-imagestransport">
		<img src="../images/icone_bateau.png" alt="en bateau" width="36" height="31" class="image"/>
		<h4>En bateau</h4>
		</div>
				
		</div>
</td>

Modifié par bernjean (13 Aug 2007 - 00:28)

Okie, je viens de trouver un "fix"...

En ajoutant un "height" à ma boîte "cc-col1-transport", ça semble fonctionner...

Il me semble que je ne devrais pas avoir à faire ça par exemple...

Bonjour,

bernjean a écrit :
Ce div "conteneur" a une image de fond blanche transparente à 70% (un png) qui se répète.

Attention: la transparence graduelle du PNG-24 n'est pas supportée nativement par Internet Explorer avant la version 7. Les PNG-24 avec transparence graduelle apparaitront donc avec un fond opaque.

bernjean a écrit :
Pour une raison qui m'échappe, le fond transparent ne s'applique que pour le 1er div et ce, dans FF.

À vue de nez, un problème de dépassement des flottants:
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html
Pour le coup, c'est le rendu dans IE (le bloc englobe les flottants) qui est défectueux, même si on pourrait croire le contraire.

Merci beaucoup Florent! Ça semblait en effet être le problème.

Finalement, j'ai opté pour une transparence à 80% sur le bloc parent. C'est le juste milieu entre aucune transparence dans IE et une transparence légère partout, même si les blocs inclus dans le parent sont aussi transparents.

background-color: #FFFFFF;
filter: alpha(opacity=80);  
-moz-opacity: 0.80;
opacity: 0.80;

Bonne journée!