IE != FF after innerHTML = ""

[BillSaysThis]

Please feel free to razz me if this is a totally noob question and I should be doing browser detection and such to handle this situation. Hopefully the answer is simpler than that.

I want to show a list of items and if the user clicks an item, show some text. So the HTML includes a <div id="xxx"></div> after each item, with CSS visibility: hidden and onclick I update the div's innerHTML with the text and visibility to visible. So far so good.

When the user clicks again I want to remove the text and revert to the previous display; I set innerHTML="" and visibility: hidden. This works fine on Firefox but on IE a blank line is left. I tried setting top and bottom margins to 0 but that had little effect.

So, what am I doing wrong?

Thanks,
Bill

[jscheuer1]

Odd, if the innerHTML is set to "" the visibility property shouldn't make any difference. Visibility hidden is supposed to leave a spot there for the element even though you cannot see it. The problem may be using the division tag which carries with it block level spacing (line break before and after). You might have better luck using a span tag which displays inline. Failing that, you might want to experiment with the element's display property instead of its visibility property, values for display that would apply to this situation are none, block and inline.

PLEASE: Include the URL to your problematic webpage that you want help with.

[BillSaysThis]

John,

Thanks for the answer. I of course mucked things up implementing it at first but in the end switching to span and display from div and visibility did the trick. For now I'd prefer not to publicly post the URL as it's a testbed but if you're for some reason really interested feel free to send me a message at bill at my username here .com.

Bill

[Twey]

Try display:none.