bug 165 - dynamic pre population fails in IE

Issue: #165
Affects: IE6, IE7, IE8
Fixed in: IE9 PP4

The <pre> tag is the one tag that will allow you to put pre-formatted content on the screen. It's the only way to display code or structured text without losing all the whitespace markup.

What's odd, is that you can't set the contents in IE using .innerHTML because if you do, you will lose all of your whitespace formatting.

Example:

<script type="text/javascript">
 myPreObj.innerHTML = 'This\nWill\nFail...     no linebreaks or spaces';
</script>

Known Workarounds: One. Setting the .innerHTML to well the .innerHTML magically fixes this issue (and some others in an upcoming article).

Example Workaround Code:

<script type="text/javascript">
 myPreObj.innerHTML = 'This\nWill\nFail...     no linebreaks or spaces';
 myPreObj.innerHTML = myPreObj.innerHTML;
</script>

That's right! "Set my inner content, to my inner content" - fixes this bug in IE... go figure?

Related Issues: One. It has come to our attention that trying to append a text node to the pre element via appendChild() will fail to handle whitespace properly and the hack above to set the innerHTML to itself will not fix it.

Bug/Site Feedback |
Submit a bug