Newsgroup: it.comp.lang.javascript
Titolo: oggetto statico HTML funziona su tutti i browser, stesso oggetto creato con il DOM su IE non funziona

Eccomi di nuovo a rompere le scatole, sono sempre alle prese con la
mia galleria fotografica in JavaScript. Per evidenziare il problema ho
scritto lo stesso codice sia in HTML che in JavaScript, il tutto
ridotto all'osso. Entrambi generano due quadratini contenenti una
thumbnail.
Con Firefox, Opera, Safari vengono correttamente disegnati 4
quadratini; non vi è alcuna differenza apparente tra quelli generati
tramite HTML e quelli generati con il DOM.
Con IE i quadratini generati in HTML vengono ugualmente bene, ma
quelli tramite DOM appaiono diversamente (gli attributi width, height,
margine vengono ignorati, il div che contiene l'immagine non ha la
cornice etc...) ed uno sotto l'altro invece di rimanere sulla stessa
linea.
Se sostituisco lo span1 da DIV a SPAN appaiono in linea anche con IE
(con gli altri browser è assolutamente indifferente), ma in ogni caso
continua ad ignorarmi width, heighr, border...
Non ne posso veramente più di IE :-)
Qualche idea ?
Grazie ancora!
Allego tutto il codice della pagina:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd
">
<html>
	<head><title></title>
	</head>
	<body>
		<div id="view" style="margin: 5px; border:2px solid black;width:
500px; height: 500px;">
			<div style="margin: 5px; border:2px solid green;float: left;width:
100px; height:100px;"
				onmouseover="this.style.border='solid red 2px';"
onmouseout="this.style.border='solid  green 2px';">
				<a href="javascript:void(0)">
					<img src="1.jpg" style="width:100px;height: 100px;"  border="0">
				</a>
			</div>
			<div style="margin: 5px; border:2px solid green;float: left; width:
100px; height:100px;"
				onmouseover="this.style.border='solid red 2px';"
onmouseout="this.style.border='solid  green 2px';">
				<a href="javascript:void(0)">
					<img src="1.jpg" style="width:100px;height: 100px;" border="0">
				</a>
			</div>
		</div>
	<script language="JavaScript">
		window.onload = draw;
		function draw(){
			// Contenitore esterno
			var ele = document.getElementById('view');
			for(var a = 0; a< 2; a++){
				// Immagine
				var img = document.createElement('img');
				img.setAttribute('src', '1.jpg');
				img.border = '0';
				img.setAttribute('style', 'height:100px;width:100px');
				// Link
				var anchor = document.createElement('a');
				anchor.setAttribute('href', 'javascript:void(0)');
				anchor.appendChild(img);
				// Contenitore
				var span1 = document.createElement('div');
				span1.setAttribute('style', 'width: 100px; height: 100px; margin:
5px; border: 2px solid red; float: left;');
				span1.setAttribute('onmouseover' , 'this.style.border=\'solid gold
2px\';');
				span1.setAttribute('onmouseout' ,'this.style.border=\'solid red 2px
\';');
				span1.appendChild(anchor);
				ele.appendChild(span1);
			}
		}
	</script>
	</body>
</html>

Mi sono arreso: invece di creare i vari oggetti creandoli con il DOM,
ho optato per un brutale innerHTML.
Funziona anche con IE, certo è ben strano e poco elegante...
Ciao

Kvochur wrote:

i puristi diranno giustamente che fa schifo.
ma io sono molto solidale con te.
-- 
there is no real life, only AFK

 \';');
Questa cosa te l'avevano già corretta, come mai è di nuovo qua?
	span1.onmouseover = function(){
		this.style.border = "1px solid red";
	}
 
	span1.onmouseout = function(){
		this.style.border = "1px solid blue";
	}
-- 
~ "Solo i morti hanno visto la fine della guerra."
(Platone)