Jump to content

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


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 post
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 post
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 post
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 post
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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...