Welcome to WebmasterWorld Guest from 220.127.116.11
Forum Moderators: incrediBILL
<td class="main-menu-1" width="133" height="107">
(first part of the main menu)
<td class="sub-menu" width="133" rowspan="3">
(a submenu, has plenty of space)
<td id="content" class="content" rowspan="4" width="355">
(the content, can be short or very, very long)
<td width="109" bgcolor="#181249">
(empty box in the top-right corner)
<td class="main-menu-2" width="133" height="107">
(second part of the main menu)
<td rowspan="2" width="109">
(double-row picture in the right-most column)
<td class="main-menu-3" width="133" height="77">
(third part of the main menu)
(the box that should vary in height so the left column's height matches that of the content)
(the box that should vary in height so the right-most column's height matches that of the content)
In reality it's a lot bigger and more awful that this (I cut quite a lot for readability). However, the varying height of the bottom-left and bottom-right cells works perfectly in Firefox. however, it doesn't work in IE; it stretches all the menu cells that are supposed to have a fixed height.
So why doesn't IE respect those fixed heights? Why does it stretch everything? And most importantly, how can I get it to do what I want?
If I were trying to adapt that layout, I would not use separate <td> sections for the parts you need to see next to each other vertically -- I would have them all flow within one <td> that uses style="vertical-align:top;".
I think you'll need to rethink the page layout. Instead of using separate table cells for each menu item, you might just flow the menu areas vertically within one cell. This would not open you up to this IE behavior. The cell heights get averaged out and IE ignores your height rules, even in standards mode.
Unfortunately, your "submenu" cell throws a spanner into the works for this on-big-cell approach, too. If you really need the bottom right content to span the width of both cells (as in the current layout) then I'm at a loss. If you don't, I'd just go with four long cells that are each vertical-align:top
With IE, try to work out a plan for the table from the beginning. For instance, know the width and height of the ENTIRE table. Then, break your cells down accordingly. Don't forget about cell spacing and padding. If every value is accounted for, you'll notice much better results. BUT, the key is to NEVER have a cell or table without width and height defined (even if you have to enter '0').
If all your math adds up, IE will see this as "logical" and use what you've set forward. Of course, you have to make sure the content of the table will fit within the slots you've assigned.
But the html code, and the xslt that generates it, is really ugly. But it was ugly before I started working on it, so I'm happy that my next project is a much more thorough redesign, and a real webdesigner wrote some really nice and clean html+css for me. Even less time to do it, but after this last project, I'm getting the impression that sometimes starting over completely can actually save time.