IE 8 & 9 ignoring div width - how to get this example to work?
css, doctype, internet-explorer, internet-explorer-8, internet-explorer-9
Solution
you should put "`;`" in `<div style="width: 300px;">` (good practice )
use `display: inline-block`; instead of `white-space: nowrap;`
Problem
The following html page seems to render fine in any browser but IE 8 & 9: ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> </head> <body> <div style="width: 300px"> <span style="white-space: nowrap;"> <input type="radio" value="1" name="test" />Choice 1 </span> <span style="white-space: nowrap;"> <input type="radio" value="2" name="test" />Choice 2 </span> <span style="white-space: nowrap;"> <input type="radio" value="3" name="test" />Choice 3 </span> <span style="white-space: nowrap;"> <input type="radio" value="4" name="test" />Choice 4 </span> <span style="white-space: nowrap;"> <input type="radio" value="5" name="test" />Choice 5 </span> <span style="white-space: nowrap;"> <input type="radio" value="6" name="test" />Choice 6 </span> <span style="white-space: nowrap;"> <input type="radio" value="7" name="test" />Choice 7 </span> </div> </body> </html> ``` The html seems fairly straight forward, but IE 8 & 9 ignore the width on the div and force all choices on the same line (IE 7 and all other non-IE browsers wrap at 300px as they should). Somehow I need this radio button list to wrap at a specified width while not separating the radio from the corresponding choice. I can get IE 8 & 9 to behave if I change the doctype, however I'd like to avoid changing that if possible. I get the same behavior if I use the old-school "nobr" tags in place of the span tags.