Su IE una proprietà CSS mi disattiva js

[essezeta]

Saluti a tutti,
mi sono messo in testa di alfabetizzarmi in js... per cui sto smanettando con scriptini e
altri esempi da personalizzare... insomma smonto un po' il giocattolo...

Ho personalizzato uno script per il fading di immagini e sono incappato in questo strano comportamento...

Ho una pagina composta da un div contenitore con altri div al suo interno...

• Caricando la pagina, un .js provvede a creare un effetto fading dei contenuti del div contenitore...
  
• Tutto bene... ma se a uno dei contenuti imposto nel css l'attributo position:relative, con IE lo script smette di avere effetto su di esso...
  
• Con FF invece continua a funzionare tutto perfettamente...

Quando mi trovo davanti a comportamenti inspiegabili mi incaxxo

Da cosa può dipendere? Avete qualche dritta/consiglio/spiegazione?

Ecco una DEMO ON LINE della pagina...

Ed ecco il .js:

<script type="text/javascript">
<!--
document.write("<style type='text/css'>#div_che_subisce_il_fading {visibility:hidden;}</style>");

function initImage() {
	imageId = 'div_che_subisce_il_fading';
	image = document.getElementById(imageId);
	setOpacity(image, 0);
	image.style.visibility = "visible";
	fadeIn(imageId,0);
}
function fadeIn(objId,opacity) {
	if (document.getElementById) {
		obj = document.getElementById(objId);
		if (opacity <= 100) {
			setOpacity(obj, opacity);
			opacity += 10;
			window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
		}
	}
}
function setOpacity(obj, opacity) {
	opacity = (opacity == 100)?99.999:opacity;
	// IE/Win
	obj.style.filter = "alpha(opacity:"+opacity+")";
	// Safari<1.2, Konqueror
	obj.style.KHTMLOpacity = opacity/100;
	// Older Mozilla and Firefox
	obj.style.MozOpacity = opacity/100;
	// Safari 1.2, newer Firefox and Mozilla, CSS3
	obj.style.opacity = opacity/100;
}
window.onload = function() {initImage()}
// -->
</script>

[Xinod]

e' normale:
l' opacita' in IE e' data dal filtro alpha,
per poter applicare i filtri di IE ad un elemento questo deve "avere il layout" (haslayout)
questa modalita' si forza (se l' elemento non rientra tra quelli che l' hanno di default) in diverse maniere, per esempio specificando un posizionamento assoluto
o specificando zoom:1 o un width o height che non sia auto etc etc

questo e' uno dei documenti piu' completi al riguardo
http://www.satzansatz.de/cssd/onhavinglayout.html
linkato anche dalla documentazione ufficiale microsoft sull' argomento
http://msdn.microsoft.com/en-us/library/bb250481(VS.85).aspx

ciao

[essezeta]

Grazie Xinod!!!
con le tue dritte e le documentazioni citate sono riuscito a risolvere applicando al contenitore degli elementi che voglio far apparire in fading una delle proprietà css che rendono un elmento layout...

:::::::::::::::::

Posso continuare per precisare una cosa anche se non è la sezione più appropriata?

Il discorso però non torna...
nel senso:

Un "elemento layout" può essere qualunque elemento che ha layout di default o che ha ottenuto layout con un'appropriata impostazione di una proprietà CSS.

(cito dalla trad. it della documentazione segnalata da te)

Il mio js applica opacità al #div_che_subisce_il_fading, che evidentemente è un "elemento layout"...
...infatti tra le sue proprietà avevo già height:300px; e la documentazione dice che

Le seguenti coppie CSS valore-proprietà permetteranno ad un elemento, se applicate, di ottenere layout.
...
...
height: qualunque valore

Ma all'interno di #div_che_subisce_il_fading ho due elementi, che sono anch'essi "elementi layout", perché hanno queste proprietà:

float:left;   /* questa rende layout */
width:40%;
height:100px;   /* pure questa rende layout */
border:2px dashed;

e quelle commentate fanno parte della lista che permetteono ad un elemento, se applicate, di ottenere layout...

Solo che uno dei due elementi ha anche position (absolute o relative non cambia), e allora in IE non ottiene l'opacità... invece dovrebbe!! perché position:absolute ad esempio fa parte della lista di coppie CSS valore-proprietà permetteranno ad un elemento, se applicate, di ottenere layout

Risultato (se non opero la modifica risolutiva di cui ho parlato all'inizio)...
questo div ottiene opacità:

float:left;
width:40%;
height:100px;
border:2px dashed;

QUESTO INVECE NO eppure non è senza layout, anzi!! gli devo levare una delle prop che danno layout per farglielo avere...

float:left;
width:40%;
height:100px;
border:2px dashed;

position:relative;

Spero di non essere stato troppo confusionario...
Era solo per buttare un sassolino... se qualcuno sa darmi chiarimenti ulteriori...

Ad ogni modo, ai fini della mia richiesta originaria, la discussione la ritengo riuscita perchè il consiglio di Xinod mi ha fatto trovare una soluzione...

Un saluto a tutti...

[Xinod]

se non e' una questione di haslayout e' probabilmente un' errata interpretazione di IE
e presentandosi il problema anche in assenza di animazione via js sposto nel forum css,
dove forse potranno darti delucidazioni aggiuntive

nota pero' che assegnando un posizionamento (assoluto o relativo) al contenitore aggiri il problema
ciao