[XHTML] body height *?* - HTML forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

[XHTML] body height ?

aphexd

6:06 pm on Aug 4, 2003 (gmt 0)

10+ Year Member

hey guys,

i've a little problem with a table in my XHTML document..


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
 <title>height test</title>
</head>
<style>
html { height: 100%; }
body {height: 100%; margin: 0px; padding: 0px; background: #3F638A; font-family:verdana,tahoma,arial,helvetica; font-size:10px; font-weight:normal; color:#000000; }
</style>
<body>
<table border="1" cellpadding="0" cellspacing="0" style="width: 100%; height: 100%;">
 <tr>
 <td style="height: 20px; width: 100%;">top nav</td>
 </tr>
 <tr>
 <td style="height: 50px; width: 100%">top</td>
 </tr>
 <tr>
 <td style="height: 20px; width: 100%">navigation</td>
 </tr>
 <tr>
 <td style="height: 100%; width: 100%;">content</td>
 </tr>
 <tr>
 <td style="height: 20px; width: 100%;">bottom</td>
 </tr>
</table>
</body></html>

Now the problem is that the page is too height in IE 6...
With HTML4 it was no problem but with XHTML, this seems like a big bug (or not?)

thanx for your help..

greets,
benny

btw: sorry for my bad english :(

moltar

6:17 pm on Aug 4, 2003 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

I think that height of your TDs in the table do not add up. Take a look, your fourth row is 100% and there are few others that are 20, 50, 100, 20 pixels. That will make it 100% + 190px if I am not mistaken.

aphexd

6:31 pm on Aug 4, 2003 (gmt 0)

10+ Year Member

yeah but how can i fix this? :)

moltar

7:16 pm on Aug 4, 2003 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

yes, remove 100% :)

aphexd

7:37 pm on Aug 4, 2003 (gmt 0)

10+ Year Member

the table is now at 100% of the page but my height values of my other cells were ingnored

rahmuss

9:59 pm on Aug 4, 2003 (gmt 0)

10+ Year Member

I'm not sure you can mix and match pixel sized columns and percent sized columns, and get "happy" results. What exactly are you trying to do? You could consider using CSS to give absolute values for the table; but that really depends on what you're trying to accomplish. What are you using to edit your HTML?

aphexd

10:25 pm on Aug 4, 2003 (gmt 0)

10+ Year Member

i want a table like this:

-------------------- <--
top nav
--------------------
top
--------------------

content

--------------------
bottom nav
-------------------- <--

now, i want the height of the page is the same like the height of the browser window...and the only cell which height should be variable is the content cell...

so i want top nav and top and bottom nav have fixed heights and the content height is variable...

in html4 is was working with the height attributes but with xhtml and attributes/css (both tested) its not working

Ryan8720

2:41 am on Aug 5, 2003 (gmt 0)

10+ Year Member

In XHTML, which is more strict, 100% is actually 100%. In HTML, 100% usually just pushes the element as far as it can go without pushing another element off screen.

The only way (that I can think of anyway) that you can accomplish what you want to do is use an HTML doctype. If you use XHTML, the closest you can come is:

(replace XX with your number)

-------------------- <--
top nav style="height: XXpx"
--------------------
top style="height: XXpx"
--------------------

content style="height: auto"

--------------------
bottom nav style="height: XXpx"
-------------------- <--

This will make the content box expand as far as the content inside the box pushes it. Your page will not always be the exact height of the veiwable area of the browser.

I don't really see why you would want that anyway, because you would have a bunch of extra space in the middle of your page if you don't have enough content. And if you have too much content, the page will be forced down anyway.

rahmuss

6:21 pm on Aug 5, 2003 (gmt 0)

10+ Year Member

It sounds like the easiest way to do this would be to use CSS to define a class where the table position is all the way to the top and to the left. This table would only have two rows. The navigation row, and the top row. Then you would have the main content for the page outside of any table. So it won't need to be in a table. Then another table class using CSS that would position the table at the exact bottom. That way all the cells would be the correct size. We don't like to actually give you the code to use. It's really best to try it yourself; but if you do need more help just message me and I'd be happy to further direct you.