473,326 Members | 1,972 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

IE7 table float problem


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
Aug 7 '07 #1
3 5521
On 2007-08-07, Harry <wrote:
Using IE7, I'm trying to display a table in a horizontal manner by
floating the rows.
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.
><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 ?
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 <tableand
<trwhich 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.
Aug 7 '07 #2
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
On 2007-08-07, Harry <wrote:
Using IE7, I'm trying to display a table in a horizontal manner by
floating the rows.

This is an extraordinary idea,
As is brilliant the analysis you follow up with...

--
dorayme
Aug 7 '07 #3
Ben C wrote:
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.
Ben: thanks for your explanation, and I'll look into your suggestion
very seriously indeed.
I find CSS wonderful in theory but a mine-field in operation.
Aug 8 '07 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: T | last post by:
I am attempting to create a menu using <div> and <span> tags within a table cell. When the page loads, some of the classes don't seem to be applied. If I hover over the menu everything is fine...
1
by: Robert | last post by:
I created two pages. One using CSS and the other using a table. I'd like the css version to work like the table version. The problem arises when the full image doesn't fit in the window. Click...
0
by: phil_gg04 | last post by:
Hi CSS Experts, I'm suffering from the known Internet Explorer "3 pixel offset next to a float" problem - see for example http://www.positioniseverything.net/explorer/threepxtest.html....
3
by: Astra | last post by:
Hi All I'm really stuck on this one so would appreciate any help you can give. In essence, I have 1 SQL 2000 table with rows of data logging stock movement. To differenciate between a stock...
9
by: Jimakos Bilakis | last post by:
Hi everyone! I want to create a function that it will take as parameters a table (float), an integer (the number of Table's rows) and it will re-arrange the elements in the table from the...
8
by: Gianni Rondinini | last post by:
hi all, i'm here again. i couldn't find/understand this on w3c css2 recommendation and documentation, then here i ask. i decided to still use some tables in my pages for some forms. i played...
0
by: h2reyes | last post by:
I have the following query: select sq.*, p.numero, p.nombre from paf p right outer join dbo.GetListOfSquaresForShippingLot(@lot) sq on sq.number = p.numero and sq.version = p.numero The @lot...
1
by: rsteph | last post by:
I've got a page with a menu div that is 1066px wide by 150px high. And then I have some images that are 150px by 150px for the menu items. I put the images in a table that is set to 150x150px with a...
7
by: Allie | last post by:
Here's an example of what I'm trying to do: <table> <tr style="text-align:left; font-size:10pt; font-weight:bold"> <!-- I want this word to align to the left --> ' ||CRPT|| ' <!-- I want this...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.