IE7 table float problem

  • Thread starter Thread starter Harry
  • Start date Start date
H

Harry

Using IE7, I'm trying to display a table in a horizontal manner by
floating the rows.
The following html does not work, displaying the table vertically as if
the rows were not floated.
This same html does work correctly in firefox.

<table style="width: 100%">
<tr style="float: left">
<td>col1</td>
</tr>
<tr style="float: left">
<td>col2</td>
</tr>
</table>

Does someone has any idea why and how to correct it ?

Thanks in advance
 
Why is it that you are doing this?

Why use a table at all?

(by the way, don't crosspost)
 
Murray said:
Sorry - I cannot find that forum.
Click to expand...
Murray, for your interest I reproduce here the excellent answer that I
received
over in the crossposted group:

Ben said:
Using IE7, I'm trying to display a table in a horizontal manner by
floating the rows.
Click to expand...

This is an extraordinary idea, but it is actually defined what is
supposed to happen, although it might not be in the way you were
expecting.
The following html does not work, displaying the table vertically as if
the rows were not floated.
This same html does work correctly in firefox.
Click to expand...
<table style="width: 100%">
<tr style="float: left">
<td>col1</td>
</tr>
<tr style="float: left">
<td>col2</td>
</tr>
</table>
Click to expand...
Does someone has any idea why and how to correct it ?
Click to expand...

When you set float: left on a tr, it stops being display: table-row and
become display: block (CSS 2.1 9.7).

That means this table has no table-rows from the CSS point of view. But
as far as the HTML parser is concerned, it is OK, and is therefore not
"repaired".

This means you end up in section 17.1.2 of CSS 2.1 ("Anonymous table
objects"). What that does is create an anonymous table row box and table
cell box around the two floats since they appear directly inside a table
without a cell or a row.

Having done that, each td is now orphaned, so each one now needs its own
whole new anonymous table and tr.

So you end up with this structure of CSS boxes:

table
anon table-row
anon table-cell
float
anon table
anon table-row
anon table-cell
col 1
float
anon table
anon table-row
anon table-cell
col 2

So the outer table only has one cell, with two floats in it, each
containing another table. The floats should go side-by-side in their
cell if there is enough room, which is hard to tell in your case because
all we know is "width: 100%".

So who knows where the problem is in IE7, perhaps it doesn't implement
17.1.2 properly at all. After all you don't often get there unless you
use the display: table-row etc. properties (which I don't think IE7
supports) or change the value of display on elements like <table> and
<tr> which is what you're doing implicitly by floating them.

How to correct it? It's difficult to know. But table rows go one
underneath the other _in all the browsers_, it's just that the HTML
you've written is generating a lot more CSS boxes than it might look
like it is. If you need side-by-side table rows, you need to put them in
separate tables, which is what conforming browsers effectively do for
you with this input.

So I think you're likely to avoid the problem if you don't set float on
table-rows (or table-cells). Put each of those rows in separate tables
explicitly and then float the tables.
 
Yes - excellent answer. Thanks for reproducing it.

Can you tell me what you are trying to accomplish by doing this?
 
Agreed; very thorough answer; it reminds me to try and avoid tables, and not
to mix in advanced (at least for tables) CSS with them.

Your code in FF and Opera seem to do what you want, and it's just IE7 that
does not.

I also agree that we could use a little more info on what you want this to
display as. From what you state it seems to be that you wouldn't need to do
any of this and that you could just use a single row in the table, or some
inline css elements. About the only thing that pops into my mind on why you
would want to do this is if you are trying some fancy displaying of
information that would be using code generated from a .Net control that is
creating the table code.

So, I will ask you if you are using static or dynamic html for what you want
and if it is static can you make an image or something so we all can see
what you want to do and if there is away that we can help you achieve your
goal.

Mike

**************************************
 
Back
Top