Menu
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.
414
This browser is no longer supported. Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
No, you cannot install IE8 on Windows 10. If a website will only work with IE8, open Developer Tool from F12. On the Emulation tab, set User Agent to be IE8. You will have to do this every time you access this site.
It and older versions of Internet Explorer are no longer supported.
you should put ";" in <div style="width: 300px;"> (good practice )
use display: inline-block; instead of white-space: nowrap;
74
The problem is with the tabs and newlines that you have in your markup. You're asking IE to not wrap on these, yet at the same time asking each element to remain narrow enough to sit side-by-side in the parent container.
You'll note that if you remove the white-space, all browsers render the markup the same:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
border: 1px solid #333
}
span {
border: 1px solid red;
white-space: nowrap
}
</style>
</head>
<body>
<div>
<span><input type="radio" value="1" name="test" /> Choice 1</span>
<span><input type="radio" value="2" name="test" /> Choice 2</span>
<span><input type="radio" value="3" name="test" /> Choice 3</span>
<span><input type="radio" value="4" name="test" /> Choice 4</span>
<span><input type="radio" value="5" name="test" /> Choice 5</span>
<span><input type="radio" value="6" name="test" /> Choice 6</span>
<span><input type="radio" value="7" name="test" /> Choice 7</span>
</div>
</body>
</html>
3
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
