Testing display:table; in Internet Explorer
Internet Explorer 7 is a great improvement on the browser, with a lot of support. But one thing they didn't release was support for the display:table CSS property.
Below the ad you will see a table and a div. In Firefox, Opera, and Safari the two boxes display nearly identically (Since I didn't modify the cellspacing and cellpadding, they are a little different). But in Internet Explorer, the div takes up the full page, and the table takes up only the space it uses.
Table
|
When rendered, this box is exactly as wide as it needs to be to accomodate the contents. |
<table>
<tr>
<td style="background:#cfc;border:double #c8c 5px;padding:0 1em">
When rendered, this box is <em>exactly</em> <br/>as wide as it needs to be to accomodate the contents.
</td>
</tr>
</table>
Div
When rendered, this box is exactly
as wide as it needs to be to accomodate the contents.
as wide as it needs to be to accomodate the contents.
<div style="background:#cfc;border:double #c8c 5px;padding:0 1em; display: table;">Jennifer Kyrnin
When rendered, this box is <em>exactly</em> <br/>as wide as it needs to be to accomodate the contents.
</div>
