XHTML valid code and table problems ... [Archive]

View Full Version : XHTML valid code and table problems ...

newttyy

07-11-2007, 05:07 PM

Hello there,

First of all I have to say that right now in this moment I am one of the most frustrated person in the whole univers ...
Let me tell you why, and I really hope and pray someone out there can help me out finding a solution to this.

First, the problem:
Yes, is the well known height=100%. I know there is a perfectly working solution, however my problem goes a little bit beyond that ...

Second, the conditions:
1. - The code HAS to be XHTML.
2. - As long the rules of XHTML are not broken, anything can be used.
3. - has to work the same in Explorer and Firefox (don't care about the other ones).

Third, what I am trying to do:
I have a perfectly working table with height=100%, with three rows. I want the first row on the top and the last row at the bottom to have a fix width and the row in the middle to fill in the rest of the space.

For whatever reasons, it just doesn't work!! In Firefox, it seems is working, however Explorer just don't get it (sometimes I just hate this browser)!!!
I really really want to make this working, even if I will have to use Javascript.
Please help!!!

The code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>.: newttyy - test 12 :.</title>
<style type="text/css">

</style></head>

<body>

<table id="inABox" width="700" border="1" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="10" rowspan="3"> </td>
<td height="200"> </td>
<td width="10" rowspan="3"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="50"> </td>
</tr>
</table>

</body>
</html>

jsebrech

07-12-2007, 08:32 AM

My advice: make it work in firefox and use css dynamic properties (css styles with expression:[javascript statement]) for IE, possibly in an IE-only stylesheet (included with IE conditional comments). That's my current convention for all web app development.

http://msdn2.microsoft.com/en-us/library/ms537634.aspx

newttyy

07-12-2007, 12:56 PM

Hi Joeri,

Sounds like a good plan what you propose, but I have to admit I need some help on this one. Would you care to show me a working sample if you don't mind?

jsebrech

07-13-2007, 08:51 AM

This page contains an example of including CSS expressions for IE6 or below (see the "IE workarounds" section):
http://www.456bereastreet.com/archive/200609/css_frames_v2_fullheight/

And this page demonstrates how you can use expressions to allow a max-width style in IE6:
http://tom-lee.blogspot.com/2006/03/max-width-in-ie-using-css-expression.html

You should be able to figure out how to do a 100% height based on what's on these pages.

newttyy

07-13-2007, 04:15 PM

Joeri,

The first link that you give me basically solves 98% of my problems.
The only small inconvenience that I might have is that the top and bottom are over the text when the window is shrinked.

I didn't had time to play around with it too much but your answer brings me on the right track. Hopefully I will have some time this weekend to play around with it and come back with something ...

Thanks!!

newttyy

07-18-2007, 09:43 PM

Hello again!

I had some tim to play around with that css and everything seems to be working quite nicely, however even with the separate .css file for the older explorer (6 in my case), the page is not working 100% corectly.

I get the scroll, I get the position, but in the same time I get the extra padding for the body ... hehe.

Anyway ... maybe I'll fix it in a way. Is way and is working for the new browsers at least.

Thanks again!

jsebrech

07-19-2007, 07:22 AM

The nice thing with conditionals for IE is that you can include specialized style and script for IE6 only, so there is always a way to force it to behave, even if that way is cumbersome and difficult to figure out.

jsebrech

07-19-2007, 12:15 PM

One more link, this one explains the principle of 100% height using expressions in IE and pure CSS in other browsers in an extremely clear way:
http://www.alistapart.com/articles/conflictingabsolutepositions

newttyy

07-20-2007, 06:41 PM

Hello again Joeri,

Thanks for the last link. Fancy you sent me on that site ... I usually go there and read their articles, but didn't really found that specific one.

I do understand the principle of 100% height and I do understand the browsers limitations ... the trick is to actually get the layers/tables display the way you want using so called "valid code".

So far, these are just workarounds that don't do 100% what I want.

The first link ... is the closest. I even figure it out what was wrong for IE6 ... however...

While the method is quite cool in is way because you have the header and the footer in their places, it kind of fails because both layers are above the content and they get to ovelap the text - something that could be quite annoying especially if the header is large ...
Moreover ... the both layers are ending up overlapping each other ... and in Firefox when they overlap, the content starts to well ... it literally "shakes". Also in Firefox, when you resize the page, both the header and footer layers tend to brake from design ... which visually will look pretty bad especially when you have a design that blends header with the body.
Not a perfect method ... but a close match. Unfortunately, me being so picky for the visual effect, I will have to dump it and keeping my eyes opened for other solutions (if any) ...

Such a hassle ... for something so minor I would say ... don't you think? :rolleyes:

Thanks again for all the help! If you find something else and you want to let me know, please do. Of course, in the mean time I will keep searching...

jsebrech

07-23-2007, 10:31 AM

Believe me, 100% height is the bane of my existance, because the visual design of my employer's web applications uses 100% height for everything. I don't have a perfect solution either, so if you find one, please post it ;)