html - Elements with "nowrap" in table row prevents entire row from wrapping in IE8 -
i forced development compatible ie8.
starting code, see window shrinks table wraps text in way separates 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> 
so, changing white-space style of 3rd element nowrap seems fix problem. force radio button , of text 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> 
however, if shrink window further, problem persists other elements, lets change first 2 elements 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> 
now entire table cell no longer wraps!
it works in firefox, not in ie8. ideas? thanks!
you can use float solve 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 working example!
this way wrap not occur , if window gets extremely small, wrap still proves useful.
Comments
Post a Comment