PNG e IE6: div con sfondo trasparente e contenuto visibile al 100%

[sakuchan]

So che questo argomento è già stato trattato, ma non riesco a trovare la discussione che faccia al caso mio... abbiate pazienza.
Ho realizzato un div all'interno del quale ho inserito una img e del testo. Lo sfondo della div è una "mattonella" gialla semitrasparente, che dovrebbe apparire come l'unico elemento trasparente del blocco, senza coinvolgerne il contenuto. Per ovviare al noto bug di IE 5.5/6.0, ho inserito il commento condizionale che segue:

<!--[if gte IE 5.5]>
<style type="text/css">
div#box_image{
float:right;
width:500px;
border:3px double red;
background: url(sfondo_semitrasp.png);
padding:5px;
margin-right:5px;
margin_bottom:5px;
width:500px;height:200px;
filterrogidXImageTransform.Microsoft.AlphaImageLoader(src='sf ondo_semitrasp.png');
filterrogidXImageTransform.Microsoft.Alpha(opacity=30); }
</style>
<![endif]-->

In questo modo la trasparenza viene applicata all'intero blocco, compreso il contenuto.
Esiste una soluzione con i CSS (magari modificando solo il background del div) o bisogna ricorrere a javascript?

(La mia pagina di prova è visibile a questo URL:
http://www.sakuraweb.it/prove/test_css.html)

[pictor]

Credo che sia il problema dell'ereditarietà della trasparenza.

Non ricordo la regola precisa ma mi sembra che devi applicare il position:relative o absolute al primo div che non vuoi che erediti la trasparenza.

Comunque se cerchi su internet dovrestri trovare delle info.

[sakuchan]

Grazie mille del consiglio! Effettivamente il problema sembra risolto creando un secondo div per testo e immagine con un posizionamento assouto tale da inserirsi perfettamente sullo sfondo del primo div.
In pratica ho aggiunto questo codice al commento condizionale precedente:

<!--[if gte IE 5.5]>
<style type="text/css">

........

div#box_text{
position:absolute;
left:480px;
top:115px;
width:480px;
}
</style>
<![endif]-->

In questo modo però testo e img non sono più "contenuto" del primo div, ma un secondo div sovrapposto e solo in apparenza contenuto nel primo. So che a questo punto il problema è solo a livello formale (filosofico?), ma mi piacerebbe sapere se questa è l'unica soluzione possibile... :master:

[pictor]

Ma credo che risolvi associando position:relative (o absolute, vedi quello che si adatta meglio alle tue esigenze) direttamente al blocco che deve diventare trasparente.
O forse a tutti i blocchi immediatamente figli (e che non vuoi che siano trasparenti).

Dovrebbe essere sufficiente, evitando l'uso di un ulteriore div.

Prova un pò. Cmq se cerchi su google la trovi la regola per cui si eredita o no la trasparenza.