Menu
I define a simple table and put an image in each cell using js via:
[CODE][I]cellObject[/I].innerHTML=”<img src='”+imageArray[index]+”.jpg’>”
and in my style sheet I have
[CODE]img {width:150px; height:150px;}
and everything works fine: each cell is 150px square.
But then I add a script at the end of the document with:
[CODE][I]cellObject[/I].innerHTML=[I]cellObject[/I].innerHTML +
“<span id=’spanId’>text</span>”
and in my style sheet I have
[CODE]#spanId {position:relative; z-index=100; left:-94px; bottom:25px; margin:0; padding:0;color:gray;}
And this DOES succeed in superimposing the text within the span on top of the image.
BUT it also results in the cell (and hence the cell’s entire column of the table) becoming WIDER by what appears to be about 25%.
The added span tag is the cause of this widening, because when I comment out the js line adding it to the cell, the column with the cell returns to its prescribed width.
Any idea WHY the space is added? (It’s added on the right; if I add the span BEFORE the image the space is added on the left, even though in both cases the text itself is well within the image and the span element should be in a different plane/layer from the image.