Table cells not lining up correctly in Firefox

[Billkamm]

I have a page with three nested tables. When the middle table has display:inline set the cells of the lowest table all collapse to the left in Firefox. This does not occur in MSIE and does not occur if there is no outer table. Does anyone know why this is occurring? This does not seem correct.

You can paste this code into a simple text file with an .html extension to see an example:

<table><tr><td>
<table style="display:inline"><tr><td>

<table border="1" >
<tr>
<th>7777777</th>
<th>666666</th>
<th>55555</th>
</tr>
<tr>
<td>1</td>
<td>22</td>
<td>333</td>
</tr>
</table>


</td></tr></table>
</td></tr></table>

 

[ca8msm]

I have a page with three nested tables.

Why? Is it really tabular data you are showing in these nested tables or is there a better method you could be using (i.e. semantic markup that reflects the actual content)?


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[Billkamm]

This is the best method available for this site.

I got a suggestion from someone though to use display:inline-table.

 

[ca8msm]

This is the best method available for this site.

As we can't see this site, we can't be sure that this is true (and from the small example you posted, it looks like you are trying to achieve some kind of page layout by using tables). If you tell us what layout you are actually trying to achieve, we may be able to advise on whether this really is the best solution or not.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[Vragabond]

Given that table is nor a block level element nor inline, setting its display to inline will likely confuse the browers. Table is an element that contains elements with special display properties (table-row, table-cell) and as such cannot conform to a simple block or inline element type. It's display can either be table (normal table) or inline-table (table that is inline). Understanding that, the suggestion you received was probably correct -- if you want a table to act as an inline element, use inline-table. However, ca8msm's question is still better -- are you sure you need an inline table to achieve what you want. I say probably not.

In addition to all this, you need to know that IE (at least pre 7, do not know about 7 itself) does not understand any of the table or inline-table display properties, it simply reverts to a normal inline or block and that is why your simple and incorrect example seems to be working in IE.