I have the following HTML markup (simplified)
<div class="controlDiv" style="white-space: nowrap">
<div class="pre"></div><input style="width: 100%"><div class="post"></div>
<div class="validationMsg" style="white-space: normal">some message</div>
</div>
the inner Div (validationMsg) shows dynamically, in FF the text message is wrapped correctly, it’s non longer than the input field above.
but in IE8 white-space property is ignored, text isn’t wrapped automatically. I did some experiments in IE developer tools, I have turned of white-space property, when wrapping was applied correctly (but fails formating of the input fields pre and post symbols, where we need to disable wrapping)
code looks like a little bit mess, but the used framework is very strict, so I was able to append only a new div or paragraph into the controlDiv.
It may not the best solution, but what IE acts is that nowrap from parent IS APPLIED to layout of validationMsg, so it’s not possible to set “white-space: normal” by itself. My solution is to have a wrapper for validationMsg with style “width: 100% (or any size that you want to apply to validationMsg div); white-space: normal”, so layout looks good to IE as well as other browsers.
Here is an example that I posted: http://jsbin.com/edeqam/1
It looks consistant on all browsers.