Jump to content

IE8- fix: display: table & display: table-cell?


tinfanide

Recommended Posts

<div><form name="queries" style="display: table;"><div style="display: table-cell; width: 250px; height: 200px;"><input type="checkbox" name="libraries" value="Lib1" />Lib1<input type="checkbox" name="libraries" value="Lib2" />Lib2<input type="checkbox" name="libraries" value="Lib3" />Lib3<input type="checkbox" name="libraries" value="Lib4" />Lib4<br /><input type="checkbox" name="items" value="title" />Title<input type="checkbox" name="items" value="barcode" />Barcode</div><div style="display:table-cell; width: 100px; height: 200px;"><input type="input" name="query" value="" /></div></form></div>

Any IE8- (in my case IE7) fix for not displaying the table-cells properly?

Link to comment
Share on other sites

If I'm remembering correctly, for the table-cell to display properly, it needs to be wrapped in an element with table-row display which is wrapped in another element with table display.

Link to comment
Share on other sites

If I'm remembering correctly, for the table-cell to display properly, it needs to be wrapped in an element with table-row display which is wrapped in another element with table display.
<form name="queries"><table style="display: table; height: 50px;">    <tr style="display: table-row;">	    <td style="display: table-cell; width: 250px;">	    <input type="checkbox" name="libraries" value="Lib1" />Lib1	    <input type="checkbox" name="libraries" value="Lib2" />Lib2	    <input type="checkbox" name="libraries" value="Lib3" />Lib3	    <input type="checkbox" name="libraries" value="Lib4" />Lib4	    <br />	    <input type="checkbox" name="items" value="title" />Title	    <input type="checkbox" name="items" value="barcode" />Barcode	    </td>	    <td style="display:table-cell; width: 100px;">	    <input type="input" name="query" value="" />	    </td>    </tr></table></form>

Yes, you are right. But display: table-row only goes with <table>, not <div>.

Link to comment
Share on other sites

<form name="queries"><table style="display: table; height: 50px;">	<tr style="display: table-row;">		<td style="display: table-cell; width: 250px;">		<input type="checkbox" name="libraries" value="Lib1" />Lib1		<input type="checkbox" name="libraries" value="Lib2" />Lib2		<input type="checkbox" name="libraries" value="Lib3" />Lib3		<input type="checkbox" name="libraries" value="Lib4" />Lib4		<br />		<input type="checkbox" name="items" value="title" />Title		<input type="checkbox" name="items" value="barcode" />Barcode		</td>		<td style="display:table-cell; width: 100px;">		<input type="input" name="query" value="" />		</td>	</tr></table></form>

Yes, you are right. But display: table-row only goes with <table>, not <div>.

display: table-row will work on any element. The point of the display property is to make an element behave like something it is not.The <tr> element doesn't need "display: table-row" because it already is a table row.
Link to comment
Share on other sites

display: table-row will work on any element. The point of the display property is to make an element behave like something it is not.The <tr> element doesn't need "display: table-row" because it already is a table row.
But it really doesn't work in IE7,
<style>.form_style{display: table-cell;width: 250px; height: 40px;}</style></head><body><form name="queries"><div style="display: table;"><div style="display: table-row;"><div class="form_style"><input type="checkbox" name="libraries" value="Lib1" />Lib1<input type="checkbox" name="libraries" value="Lib2" />Lib2<input type="checkbox" name="libraries" value="Lib3" />Lib3<input type="checkbox" name="libraries" value="Lib4" />Lib4<br /><input type="checkbox" name="items" value="Title" />Title<input type="checkbox" name="items" value="Barcode" />Barcode</div><div class="form_style"><input type="input" name="query" value="" /></div></div></div></form>

Link to comment
Share on other sites

According to compatibility research, table, table-row and table-cell are only supported on Internet Explorer 8 and above.http://www.quirksmode.org/css/display.html

Link to comment
Share on other sites

According to compatibility research, table, table-row and table-cell are only supported on Internet Explorer 8 and above.http://www.quirksmod...ss/display.html
Then I just stick to using <table>.Thanks for pointing to the reference. Quirksmod is always a good one.
Link to comment
Share on other sites

Only if your data is tabular, yes.If not, no - you should instead stick to NOT using <table> and use something else (like positioning or floats) to achieve a table-like appearance.Ideally, you may just... not care... about IE7. If that's an option. I mean, based on latest browser statistics, IE7 has a worldwide market share of 2.54%.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...