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.
you should put “
;” in<div style="width: 300px;">(good practice )use
display: inline-block; instead ofwhite-space: nowrap;