Home/ Questions/Q 8046015
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T05:41:28+00:00

I am forced to do some development that will be compatible with IE8. Starting

  • 0

I am forced to do some development that will be compatible with IE8.

Starting with this code, we see that as the window shrinks the table wraps the text in a way that separates it from its radio button:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html><body>
<table style="border-collapse:collapse; border:1px solid black"><tr>    

<td style="border-collapse:collapse; border:1px solid black">
    Foo
</td>

<td style="border-collapse:collapse; border:1px solid black">
    <label style="white-space:normal"><input type="radio" />
        Bar Bar Bar Bar Bar Bar Bar
    </label>
    <label style="white-space:normal"><input type="radio" />
        Bar Bar Bar Bar Bar Bar Bar
    </label>
    <label style="white-space:normal"><input type="radio" />
        Bar Bar Bar Bar Bar Bar Bar
    </label>
</td>

</tr></table>
</body></html>

dfd

So, changing the white-space style of the 3rd element to nowrap seems to fix the problem. It will now force the radio button and all of the text to wrap together.

<td style="border-collapse:collapse; border:1px solid black">
    <label style="white-space:normal"><input type="radio" />
        Bar Bar Bar Bar Bar Bar Bar
    </label>
    <label style="white-space:normal"><input type="radio" />
        Bar Bar Bar Bar Bar Bar Bar
    </label>
    <label style="white-space:nowrap"><input type="radio" />
        Bar Bar Bar Bar Bar Bar Bar
    </label>
</td>

fd

However, if you shrink the window further, the problem persists with other elements, so lets also change the first two elements to nowrap:

<td style="border-collapse:collapse; border:1px solid black">
    <label style="white-space:nowrap"><input type="radio" />
        Bar Bar Bar Bar Bar Bar Bar
    </label>
    <label style="white-space:nowrap"><input type="radio" />
        Bar Bar Bar Bar Bar Bar Bar
    </label>
    <label style="white-space:nowrap"><input type="radio" />
        Bar Bar Bar Bar Bar Bar Bar
    </label>
</td>

enter image description here

Now the entire table cell no longer wraps!

It works properly in Firefox, but not in IE8. Any ideas? Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use float to solve that issue:

    <td style="border-collapse:collapse; border:1px solid black;">
  <label style="float:left;"><input type="radio" />
    Bar Bar Bar Bar Bar Bar Bar
  </label>
  <label style="float:left;"><input type="radio" />
    Bar Bar Bar Bar Bar Bar Bar
  </label>
  <label style="float:left;"><input type="radio" />
    Bar Bar Bar Bar Bar Bar Bar
  </label>
</td>

    See this working example!

    This way the wrap does not occur and if the window gets extremely small, the wrap still proves useful.

    • 0