Tables, IE vs Firefox row height

Forum Moderators: open

Message Too Old, No Replies

Tables, IE vs Firefox row height

flycast

11:22 am on Oct 14, 2006 (gmt 0)

I have a layout that really lends itself to tables. The problem is that most of my learning is in CSS and not tables. The layout is a grid that has four rows. The rows have the following heights:

Row 1: 109px

Row 2: 190px

Row 3: none

Row 4: 50px

I want the third row to expand in height as needed leaving the other rows always the proper height. The html tag and table tag have heights set to 100%.

The problem is that it works well in Firefox but bombs in IE (what else would you expect). In IE when the viewport is larger than the content it makes the extra space up by expanding all the rows evenly, even the ones with explicit heights.

How can I achieve my goal of having only one row height expand in IE?

tedster

6:06 pm on Oct 14, 2006 (gmt 0)

Have you tried setting height to 100% for Row 3?

penders

11:36 am on Oct 15, 2006 (gmt 0)

In my tests (using HTML4.01 Strict), you need to set a row height of 100% for Row 3 in order to get it to work as required in FF and Opera. Otherwise, it performs the same as you've found for IE (v6) - expanding all rows evenly.

However, setting the height of Row 3 to 100% really messes up IE6, as this sets the height of Row 3 to 100% the height of the viewport (!) - although the other rows now remain the specified fixed height.

So, no closer to solving your original query... but I would be interested to know how you seem to make it work in FF, yet still keep the entire table within the browser window (viewport) in IE (v6)?