All geek questions in one place

IE 8 and 9 ignoring div width - how to make this example work?

The following html page looks great in any browser, but IE 8 and 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 looks pretty straight forward, but IE 8 and 9 ignore the width of the div and force all options on the same line to be selected (IE 7 and all other browsers other than IE wrap 300 pixels as they are used). Somehow I need this switch list to wrap with the specified width, without separating the radio from the corresponding selection.

I can make IE 8 and 9 behave if I change the doctype, however I would like to avoid the change if possible.

I get the same behavior if I use the old school "nobr" tags instead of span tags instead of span tags.

+6
source share
2 answers

you should put " ; " in <div style="width: 300px;"> (good practice)

use display: inline-block ; instead of white-space: nowrap;

+3
source

The problem is that your markup has tabs and newlines. You ask IE not to wrap them, but at the same time, we ask each element to stay narrow enough to sit side by side in the parent container.

You will notice that if you delete the empty space, all browsers display the markup the same way:

 <!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>

enter image description here

+3
source

Source: https://habr.com/ru/post/917544/

More articles:


All Articles