HTML Tables fun...

[vovan]

Okay, a question for all of you web-designers out there.

Suppose I want to create an HTML page with a table that looks like this:

+----------+------------------------------------+
|          |                                    |
|          |             Cell 2                 |
|          |                                    |
|  Cell 1  +------------------------------------+
|          |                                    |
|          |             Cell 3                 |
|          |                                    |
+----------+------------------------------------+
|          |                                    |
|  Cell 4  |                                    |
|          |                                    |
+----------+                                    |
|          |                                    |
|          |                                    |
|          |             Cell 6                 |
|          |                                    |
|  Cell 5  |                                    |
|          |                                    |
|          |                                    |
|          |                                    |
|          |                                    |
|          |                                    |
+----------+------------------------------------+

So, in this table, I want cells 1 and 4 to be of fixed dimensions; cells 2 and 3 of fixed height and width - according to the page width; cell 5 of fixed width, and height - according to the page height; and cell 6 to fill the rest of the page.

So, I give the cells I know the dimensions of the appropriate style attributes, and it seems everything should work out very well... Well, cells 1, 2, 3, and 6 do, indeed, behave as I want them to. However, in IE, cell 4 doesn't want to preserve its height! (It works just fine in Netscape and Opera, but knowing that a lot of people that will browse the resultant page will be users of IE, I have to accomodate them. ) What IE does is, it distributes the height evenly between cells 4 and 5 - both half of cell 6's height... It must have something to do with incorrect interpretation of the rowspan on cell 6, but that doesn't help me much.

Now, if I add a spacer image to cell 5 to make it higher that way, rather than through a style attribute, it works, but that limits how much information I can have in Cell 6... If I put more text there than the height of the spacer image, the problem kicks in again, and IE distributes the left over space evenly between cells 4 and 5...

Sooo, anyone know how to fix that and make cell 4 a fixed height? Help would be greatly appreciated.

[Zero]

declare the size. WIDTH= or height=

Or just use Dreamweaver to take care of everything for u

[vovan]

Originally posted by Zero
declare the size. WIDTH= or height=

I'm not that ignorant.

Sorry if my original post didn't make that clear, but I did that and it doesn't work. Tried both - Dreamweaver and the good ol' notepad. The problem as described above persists.

Anybody else have any ideas how to fool IE into rendering the page correctly?

[BustaMike]

Gimme 2 minutes... I'll give you the code... hold on.

[BustaMike]

disregard.. the forums won't display the borders well and they got rid of all my formatting

[FrostyBoy]

Sometimes you will find many problems with tables such as this, a tiny 1 pixel long image will hold all the tables together nicely.

It's obvious Cell 6 will have the text, if your text is long, cell 5 will stretch downwards, gotta make sure that everything is justified correctly.


Honestly, I dislike Dreamweaver a LOT, it has caused so many uneccessary problems I just got sick of it. I went to Frontpage 2002 and will never look back. I am waiting to get Frontpage 2003. This program IS solid. People will say "But its Microsoft" But but but, well, tell them to shove off, if the program works, it works, simple as that. If it don't, then bugger off.

[vovan]

Ah, yes, I haven't tried nested tables yet - only styles, attributes and spacer images. I'll bet this one will work though. Thanks.

[BustaMike]

The borders might have to be tweaked if you want them to show, because they will double up in the nested tables. The stupid forums took away all my formatting and wouldn't display it right anyway so here's the correct code for what you want. You'll have to play with the dimensions obviously but the gut of it is there.

[Urban Ranger]

For god sakes stop using tables! That is so 1998!

[Hueij]

Originally posted by Urban Ranger
For god sakes stop using tables! That is so 1998!

That's all fine and well, but I tried to recreate vovansim's lay-out in pure CSS for two hours now and I can't get it right in both Opera7 and IE6.

So nested tables is the way to go for now I guess...

[Urban Ranger]

Originally posted by Hueij
That's all fine and well, but I tried to recreate vovansim's lay-out in pure CSS for two hours now and I can't get it right in both Opera7 and IE6.

Hm.

I suppose a better way of saying it is to redo the layout The reason is it is silly to attempt pixel perfect layout on such a huge array of disparge output devices, some of them are not even visual.

[Hueij]

Maybe he should be using frames

Hehe...

[Urban Ranger]

/me throws a cabbage at Hueij

[vovan]

Frames? The horror! Nooooooooo....




Yeah, any way, nested tables worked perfectly fine, and I got my pixel-perfect solution on IE 6, Mozilla 1.4, and Opera 7.

Another question: I was looking at this mozilla.org site, and there is a whole bunch of different distributions over there: mozilla, firebird, and thunderbird. Anyone know the difference between those?

[St Leo]

Well, you could always merge Cell 4 with Cell 5 and create a special child table in there with two cells.