How do I work around an HTML Table rendering bug in IE 7?

Question

I have a table. Some cells span multiple columns. Some cells span multiple rows and columns. But one row (which spans all columns but the rightmost one) creates an artifact. Part of the text in the cell is erroneously repeated left justified on a new row just below the table. I'm baffled.

I tried rendering with and without "table-layout: fixed;". Same result.

When I originally composed the design using just HTML and CSS, it looked great. But then I worked it into a page and had to add more columns to my master table the right to hold buttons. These buttons are in three groups, each having their own div to control floating and rewrapping when the window gets narrower. One div has another table inside it that groups a single row of buttons. Thus I have table inside div inside td inside outer table.

I would prefer a simpler design, but how? This is what I want to have:

...................................................................................
.                                  .                                              .
.    Four rows of data             .    Three groups of buttons that can reflow   .
.    With several columns          .    if window gets narrower                   .
.    meticulously layed out,       .                                              .
.    That should not resize        .                                              .
.    when window gets narrower     .                                              .
...................................................................................
.    One more row of data spanning the whole screen which stays below the buttons .
...................................................................................

What I was doing was putting the three divs with the buttons in the upper right in a single cell that spanned four rows. What other opportunities does CSS offer? The buttons are not allowed to overlap the data on the left or go past the data line below.

The original design had the divs with the buttons NOT in a table with the data, but when the window gets narrow, some of the buttons flow such that they go underneath the data, which looks bad.

I would post actual HTML, except it is generated by ASP, huge, with lots of CSS styling, and the feature that lets me view the final HTML is not working at the moment. (Built in security in the application.)

Answer 1

Do you have to use a table? I would create a single container div with multiple div's inside to hold your content. You would then be able to position your divs with floats and define the widths you like. Elements should not be overlapping unless you are using z-index as a CSS style?

If you have to use your tables can you define the table widths?

Please post a screen shot if you can.