XHtml strict & tables height: 100% issue in IE

IE6 reacts differently to all other browsers :/

[pinkshiro]

Hey guys...found this site while searching for a solution to my problem. I hope you guys can help...
I am using the XHTML strict doctype on my site.

I am using tables for layout, but using CSS for styling those tables. Which means, I am setting all the heights via css.

Yes, I have nested tables, and all the parent tables as well as html & body have been assigned a height: 100%.

Now to my problem, I have a navigation bar along the left hand side of the page which is to stretch to the bottom of the screen. It sits within a nested table Like I said, I have set all its parent tags to 100% height. Within this nav table, I have many cells, holding all the links..and these cells have a set height assigned to them so they wont stretch. The last cell is the one that stretches, since it is assigned 100% height.

In firefox, netscape & opera, it works perfectly. It stretches exactly as far as I want it to..and validates to boot! BUT in IE6, instead of stretching 100%...it does a funny thing. With that stretch cell that is set to height: 100%, it looks like it calculates exactly the height of the browser window, and assigns that cell one complete browser window height.

In a twisted way, this makes sense. IE sees the height 100% and sets it to 1 entire browser window. But thats not the intended way that height 100% is supposed to be used. If i say height: 100%, I mean stretch to 100% of the rest of the page.

This is a long winded explanation, and I apologise in advance for that, but I have tried on a couple of other forums and no one has been able to understand my problem.

Hope someone can help. I really need this problem solved.

[tedster]

You might experiment with removing some of those height="100%" attributes and just let the browser assign space as needed. Things often work better cross-browser by going with the natural "flow" instead of issuing many rules which get interpreted differently by different browsers.

[Lynque]

Try width:inherit in your stylesheet.

FYI

I'd recommend getting away from tables and just let the css control layout

[pinkshiro]

Yes, I am aware of the general trend away from tables. I have a time contraint that doesnt allow for me to learn how to use css completely for layout. Learning how to do that is my next step after completing this project.

I dont understand the reasoning behind removing some of the height atributes of the parent tags. Under the xhtml strict doctype, one must define the height at every level to define a nested element's height.

width: inherit im not sure about either. browsers didnt even seem to consider it a real command. Maybe i typed it out wrong, but I have never heard of width: inherit before. Plus, its a height issue im dealing with here.

It is much easier to provide a link to my problem, but since thats not allowed, I have tried to do my best to explain. Has no one else ever come across this problem before?

[tedster]

An attribute of height=100% is a very regular problem cross-browser. But I think you have a major advantage because you are nesting tables. I assume that one of the <td> elements in the container holds the menu - and that <td> MUST extend to the bottom of the table, because tables are rectangular.

Can you add your styles (background or whatever) to the td itself instead of the table nested within it?

I dont understand the reasoning behind removing some of the height atributes of the parent tags. Under the xhtml strict doctype, one must define the height at every level to define a nested element's height.

The reason I suggested playing with those attributes was to get a sense of how IE is treating, or ignoring, your rules. Obviously there is something non-standard or at least unexpected happening, and you will need to experiment to understand exactly what it is.

I doubt that IE is using 100% of the viewport. It's more likely to be something else. And it may be even crazier in IE 5.5