Problema con <span> generati tramite DOM

Salve a tutti,
non sono un esperto in JavaScript e al mio primo tentativo di
realizzare qualcosa di più complesso mi sono arenato.
L'idea era quella di fare una foto gallery per il mio sito web in
javascript che permetta di aggiornare rapidamente i contenuti senza
mettere mai mano all'HTML e senza richiedere supporto server-side.

Dentro un file XML scrivo l'elenco delle immagini e una breve
descrizione. In seguito basta editare l'XML e aggiungere le foto; il
file XML viene caricato tramite AJAX, fin qui nessun problema.

Il problema sorge nel disegnare le anteprime delle immagini; in
pratica vorrei creare una struttura del tipo (almeno in prima istanza,
fatta funzionare questa vorrei qualcosa di più complesso, ad esempio
per generare uno sfondo
da usare come cornice dell'immagine)
<span> <a href...> <img...></img> </a> </span> per ognuna delle
immagini che andranno a popolare
il div contenitore. Questa struttura perfettamente funzionante se la
scrivo in HTML statico, generata tramite DOM
mi non funziona correttamente; i margini dello span non vengono
rispettati, il bordo della cornice attorno
collassa all'interno dell'immagine (!) nonostante le dimensioni dello
span siano uguali a quelle dell'immagine etc...
Se sostituisco allo span un div funziona correttamente, ma ognuna
delle antemprime è su una nuova riga, cosa che ovviamente vorrei
evitare. Un div con display: inline causa lo stesso problema dello
span.

Qualche consiglio ? Allego la parte di codice incriminato.

Se risolvo quando avrò completato la libreria la metterò a
disposizione di tutti :-)

Grazie



function drawThumbnail(number){

var img = createImage(images[number].LRsrc,images[number].title);
img.setAttribute('width', sizex);
img.setAttribute('height', sizey);

var anchor = document.createElement('a');
anchor.setAttribute('href', images[number].HRsrc);
anchor.setAttribute('target', '_blank');
anchor.appendChild(img);

var span = document.createElement('span');
span.style.width = sizex + 'px';
span.style.height = sizey + 'px';
span.setAttribute('id', 'thumb_' + number);
span.setAttribute('onmouseover', 'viewLegend(this,\'' +
images[number].title + '\',\'' + images[number].comments + '\');');
span.setAttribute('onmouseout', 'clearLegend(this);');
span.appendChild(anchor)

ele.appendChild(span);
}

Se sostituisco allo span un div funziona correttamente, ma ognuna
delle antemprime è su una nuova riga, cosa che ovviamente vorrei
evitare. Un div con display: inline causa lo stesso problema dello
span.

risolto...ehmm colpa della mia ignoranza, non sapendo che gli elementi
inline non hanno come unica differenza l'andare a capo rispetto ai
block, ma anche altre cosettine sgradite :-)

....tuttavia ora ho un altro problema e per quanto ci abbia sbattuto la
testa più volte non sono riuscito a risolverlo.
Il codice seguente funziona con tutti browser che ho provato (Camino,
Firefox sia per windows che per mac, Safari) tranne
Internet Explorer.
In pratica genera dentro un DIV una serie di contenitori che
contengono un'immagine cliccabile, affiancati in linea finché nel DIV
c'è spazio
e separati solo dai pixel del loro margine. Cliccando sopra si apre un
link, mentre passandoci sopra il mouse appaiono delle informazioni
(vedere onmouseover). Tuttavia con IE succedono due cose:

1) Le immagini sono tutte appiccicate, il margine non viene applicato
2) Questione più GRAVE: le funzioni onmouseover NON funzionano. Non
vengono chiamate proprio! E' come se tutti gli attributi del DIV
generato, margini, dimensioni, funzioni associate non esistessero per
IE. Mi chiedo se il Div stesso esista...

Sto impazzendo per questa cosa, qualche idea ?


function drawThumbnail(number){

// Immagine
var img = createImage(//parametri);
img.setAttribute('width', sizex);
img.setAttribute('height', sizey);

// Link
var anchor = document.createElement('a');
anchor.setAttribute('href', //parametri);
anchor.setAttribute('target', '_blank');
anchor.appendChild(img);

// Contenitore
var span = document.createElement('div');
span.style.display = 'inline';
span.setAttribute('style', 'margin: 5px; border: 2px solid black;
float: left');
span.style.width = sizex + 'px';
span.style.height = sizey + 'px';
span.setAttribute('id', 'thumb_' + number);
span.setAttribute('onmouseover', 'viewLegend(this);');
span.setAttribute('onmouseout', 'clearLegend(this);');
span.appendChild(anchor);
//
Inserisci nella pagina
ele.appendChild(span);
}

...tuttavia ora ho un altro problema e per quanto ci abbia sbattuto la
testa più volte non sono riuscito a risolverlo.
Il codice seguente funziona con tutti browser che ho provato (Camino,
Firefox sia per windows che per mac, Safari) tranne
Internet Explorer.
In pratica genera dentro un DIV una serie di contenitori che
contengono un'immagine cliccabile, affiancati in linea finché nel DIV
c'è spazio
e separati solo dai pixel del loro margine. Cliccando sopra si apre un
link, mentre passandoci sopra il mouse appaiono delle informazioni
(vedere onmouseover). Tuttavia con IE succedono due cose:

1) Le immagini sono tutte appiccicate, il margine non viene applicato

ma se crei una pagina in HTML "statico" senza JS, IE come si comporta?
Cioe' quello che voglio dire è che prima devi travare la soluzione HTML che
accontenti tutti (o cmq quelli che ti interessa) e poi lo sviluppi in JS...

2) Questione più GRAVE: le funzioni onmouseover NON funzionano. Non
vengono chiamate proprio! E' come se tutti gli attributi del DIV
generato, margini, dimensioni, funzioni associate non esistessero per
IE. Mi chiedo se il Div stesso esista...

beh quello lo puoi controllare facilmente...

Sto impazzendo per questa cosa, qualche idea ?

ok, vediamo....

function drawThumbnail(number){

// Immagine
var img = createImage(//parametri);
img.setAttribute('width', sizex);
img.setAttribute('height', sizey);

va bene, io cmq li metteri negli style, anzi se non hai bisogno di uno
sconsigliabile ridimensionamento, non metterli per niente...

// Link
var anchor = document.createElement('a');
anchor.setAttribute('href', //parametri);
anchor.setAttribute('target', '_blank');
anchor.appendChild(img);

// Contenitore
var span = document.createElement('div');
span.style.display = 'inline';

questo non serve, prova a toglierlo

span.setAttribute('style', 'margin: 5px; border: 2px solid black;
float: left');

prova a definire lo style come hai fatto prima:
span.style.float = 'left';
....
come del resto fai sotto

span.style.width = sizex + 'px';
span.style.height = sizey + 'px';
span.setAttribute('id', 'thumb_' + number);

span.setAttribute('onmouseover', 'viewLegend(this);');
span.setAttribute('onmouseout', 'clearLegend(this);');

questo è il solito problema devi dichiarare gli eventi con delle funzioni
anonime:
span.onmouseover = function(){viewLegend(this)};

span.appendChild(anchor);
//
Inserisci nella pagina
ele.appendChild(span);
}

ah, io cambierei nome a quella variabile 'span', io eviterei sempre nomi
"riservati al HTML" e poi è traviente perche in realtÃ* si tratta di un div

ma se crei una pagina in HTML "statico" senza JS, IE come si comporta?
Cioe' quello che voglio dire è che prima devi travare la soluzione HTMLche
accontenti tutti (o cmq quelli che ti interessa) e poi lo sviluppi in JS....

....provo

beh quello lo puoi controllare facilmente...

come? Se indendi mettendoci un bordo, quella non è una prova
decisiva :-) Potrebbe collassarmelo ad un pixel sopra l'immagine,
ignorando le
dimensioni specificate, e avrei difficoltà a vederlo...è già successo.

img.setAttribute('width', sizex);
img.setAttribute('height', sizey);

va bene, io cmq li metteri negli style, anzi se non hai bisogno di uno
sconsigliabile ridimensionamento, non metterli per niente...

ok

span.style.display = 'inline';

questo non serve, prova a toglierlo

non serve secondo le specifiche W3C, ma serve per correggere un bug di
IE (!).
Se lo tolgo con gli altri browser non cambia nulla, con IE degenera
ulteriormente

prova a definire lo style come hai fatto prima:
span.style.float = 'left';

proverò anche questo :-)

...
come del resto fai sotto

questo è il solito problema devi dichiarare gli eventi con delle funzioni
anonime:
span.onmouseover = function(){viewLegend(this)};

dici che sia meglio? Ma perché devo mettere una funzione per chiamarne
a sua volta un'altra?

ah, io cambierei nome a quella variabile 'span', io eviterei sempre nomi
"riservati al HTML" e poi è traviente perche in realtà si tratta di un div

....perché era uno span inizialmente :-) poi ho capito che con lo span
non si può fare e sono passato al div + float.

Grazie, ciao

span.style.display = 'inline';

questo non serve, prova a toglierlo

non serve secondo le specifiche W3C, ma serve per correggere un bug di
IE (!).
Se lo tolgo con gli altri browser non cambia nulla, con IE degenera
ulteriormente

Mmmm, strano...

prova a definire lo style come hai fatto prima:
span.style.float = 'left';

proverò anche questo :-)

era solo per uniformitÃ*, non sperare che cambi qualcosa

come del resto fai sotto

questo è il solito problema devi dichiarare gli eventi con delle funzioni
anonime:
span.onmouseover = function(){viewLegend(this)};

dici che sia meglio?

no dico che potrebbe essere l'unico modo

Ma perché devo mettere una funzione per chiamarne
a sua volta un'altra?

perche' ci hai messo un parametro, pero' dal momento che detto parametro è
this, allora in effetti puoi anche fare così:
span.onmouseover = viewLegend;

pero' devi cambiare la definizione di viewLegend() mettendo this al posto
del riferimento che passavi per paramentro in precedenza...

ah, io cambierei nome a quella variabile 'span', io eviterei sempre nomi
"riservati al HTML" e poi è traviente perche in realtÃ* si tratta di un div

...perché era uno span inizialmente :-)

sì lo immaginavo...

poi ho capito che con lo span
non si può fare e sono passato al div + float.

per curiositÃ*, span + float non ti funzionava? io l'ho usato in passato...

Grazie, ciao

Prego