Error in IE when inserting value to an empty span

[Stale]

When you insert value to an empty span in IE, the browser will not add the needed space between spans.

Example:

[HTML]<script>
function btnclick()
{
document.getElementById("sp2").innerHTML="KING"
}
</script>
<span id="sp1">Elvis</span>
<span id="sp2"></span>
<span id="sp3">Presley</span>
<input type="button" onclick="btnclick()" />
[/HTML]




When you push the button, "KING" is inserted in the secong span, like this

Elvis KINGPresley

with no space between KING and Presley

Anyone knows a way around this?

[mrhoo]

either set a left margin for the span or include a space in the text

[Stale]

Thank you for your reply.

But this should not be necessary.
I think that IE "forgets" to set the span's status to "not empty" when the script fills it with value.

There should be a way to tell IE that the span element is no longer empty...

[acoder]

I think that IE "forgets" to set the span's status to "not empty" when the script fills it with value.

There should be a way to tell IE that the span element is no longer empty...

I'm afraid IE 'forgets' a lot of things.

What do you mean by "not empty"? It does fill the span with the value. Does the source code show the span bunched up next to the other spans with no spaces in between them?

[Stale]

Yes it does fill the span with value, but the 2nd and 3rd span is displayed with no space between them.

So, the main problem is that IE shows the result differently if YOU write "KING" inside the span or if the SCRIPT writes "KING" inside the span.

In the source code the 3 spans are written in 3 lines. The result IS the same if you write the code on one line, with space between each span.