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

Posted by osmaniac on Stack Overflow See other posts from Stack Overflow or by osmaniac
Published on 2010-04-09T19:33:30Z Indexed on 2010/06/17 22:23 UTC
Read the original article Hit count: 807

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.)

© Stack Overflow or respective owner

Related posts about html

Related posts about internet-explorer