CODEWITHSUNDEEP
cssinternet-explorerinternet-explorer-8internet-explorer-9doctype
Troy
Troy

Reputation: 21862

IE 8 & 9 ignoring div width - how to get this example to work?

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.

Upvotes: 6

Views: 8770

Answers (2)

NullPoiиteя
NullPoiиteя

Reputation: 57312

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

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

Upvotes: 3

Sampson
Sampson

Reputation: 268344

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>

enter image description here

Upvotes: 3

Related Questions