4

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.

ijavid
  • 715
  • 12
  • 23
  • 1
    - Should that closing DIV tag actually be there? – Billy Moat Feb 13 '13 at 16:00
  • 1
    Divs pre, post and input has property display:inline; validationMsg is set to block. Also when divs pre or post are empty they are closed
    provided html markup is very simplified. I just tried to explain the structure of form fields     – ijavid Feb 13 '13 at 16:44
  • Actually all you need is the block statement, inline is the default value of display: . – RandomUs1r Feb 13 '13 at 21:26

1 Answers1

1

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.

Won
  • 1,795
  • 2
  • 12
  • 22
  • I was thinking wrapper also, I've never had to use the white-space property (it's simple enough) and that's because I use wrapper divs/clases to achieve spacing: here's a very simple example: http://stackoverflow.com/questions/5275410/correct-way-to-do-a-css-wrapper – RandomUs1r Feb 13 '13 at 21:28
  • Div wrapper usually solves most of problems. If you're having another issue due to the wrapper, let me know specific. – Won Feb 13 '13 at 22:00