Page 1 of 1

Just can't do this...

Posted: Sun Dec 04, 2005 8:43 am
by Ree
I am trying to create this kind of table:

Code: Select all

____________________
|____________________|
|____________________|
|                    |
|                    |
|                    |
|                    |
|____________________|
|____________________|
|____________________|
This table must occupy the whole screen. The height of the 4 identical rows (cells) must stay the same when resizing the window, but the middle cell (the biggest one) must be dynamic. Here's how it should look when resizing the window:

Code: Select all

____________________
|____________________|
|____________________|
|                    |
|____________________|
|____________________|
|____________________|

Code: Select all

____________________
|____________________|
|____________________|
|                    |
|                    |
|____________________|
|____________________|
|____________________|
I tried various stuff but I just can't do this (I'm using XHTML 1.1). Anyone could help?

Posted: Sun Dec 04, 2005 9:11 am
by foobar
Can you post the code that doesn't work? It saves a lot of trying to get to the bottom of things.

Here's some sample CSS as a basis:

Code: Select all

html, body {
  height: 100%;
}

table {
  height: 100%;
}

tr.dynamic {
  height: auto;
}

tr.static {
  height: 125px; /* Example value */
}

Posted: Sun Dec 04, 2005 10:36 am
by Ree
You really helped, thanks. Changing TR size seemed really unintuitive for me, but hey it works. ;)

Also, since I was using XHTML DTD, the solution didn't work with IE at first. However, there's a little work-around for this here: http://www.quirksmode.org/css/quirksmode.html

Posted: Sun Dec 04, 2005 10:56 am
by foobar
Ree wrote:You really helped, thanks. Changing TR size seemed really unintuitive for me, but hey it works. ;)
I'm glad it helped! However, you have to be on the watch for browser incompatibilities. While in IE setting table height to 100% should work fine, in FF you must set html and body height to 100% as well. That's because FF automatically shortens the page-box to fit the existing elements, limiting a height of 100% to that "truncated" height, if you will. Took a bit of hair-pulling until I figured it out.

By the way, quircks-mode will _not_ validate properly: link.

So if you want to use XHTML, then you'll have to find a different work-around.

[edit] Changing TR height rather than TD height is often a matter of preference. The result should be the same, however some browsers don't like one or the other. It gets really annoying at times. Alas, the browser wars aren't over yet. If they'd all be aligned to W3C standards, the webdesigner's life would be a lot easier.

Posted: Sun Dec 04, 2005 11:01 am
by Ree
foobar wrote:However, you have to be on the watch for browser incompatibilities. While in IE setting table height to 100% should work fine, in FF you must set html and body height to 100% as well. That's because FF automatically shortens the page-box to fit the existing elements, limiting a height of 100% to that "truncated" height, if you will.
Yeah, that I do know already :)
foobar wrote:So if you want to use XHTML, then you'll have to find a different work-around.
Not sure what you meant by this. For me it validates XHTML 1.1 just fine.

Posted: Sun Dec 04, 2005 11:05 am
by foobar
Ree wrote:
foobar wrote:So if you want to use XHTML, then you'll have to find a different work-around.
Not sure what you meant by this. For me it validates XHTML 1.1 just fine.
According to the quirks-mode source-codes on that website, all they do compared to "strict-mode" is drop the doctype. If you drop the doctype, the W3C validator yells at you. :wink:

Posted: Sun Dec 04, 2005 11:07 am
by Ree
You don't need to remove DTD. Just add this as the very first line in the file:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
Now the layout will look correctly in both IE and FF.

Posted: Sun Dec 04, 2005 11:08 am
by foobar
Ree wrote:You don't need to remove DTD. Just add this as the very first line in the file:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
Now the layout will look correctly in both IE and FF.
Hm... I guess their "examples" weren't _real_ examples of actual quirky and strict code. I should have read the article instead of reading the source-code of their examples... :P