|Liam Delahunty: Home||Tips||Web||Contact|
Think I deserve a present? See my Amazon Wish List
HTML Table Height Woes
Height attribute not standards compliant.
For years and years, like many web designers, I've been making use of the height attribute within a table to get the layouts that I want, often I've used a system whereby the navigation will be a coloured vertical strip; an easy way to acheive this and maintain backward compatibilty with old borwsers was to use height=100% in a table like so:
Unfortantly, the HTML standard published by the World Wide Web Consortium (W3C) and now adopted by most browsers is that there isn't a height attribute for tables. The thinking seems to be, that tables should be used for presenting tabular information and not for layouts. Fair enough, but what can the real world use to get the layouts our clients want?
Content and layout are supposed to be seperate in this brave new world wide web, so judious use of style sheets seems to be in order. Firstly I've replaced the table with DIV tags:
The classes I've deifined in a seperate style sheet as
Problems with this method are that while the pages continue to look okay in IE, in netscape the coloured area is only for the window size, so if content is larger than the window then the colour disappears. Resize the browser so that the content is larger than one page and scroll down.
The Cheat / Hack
There is no true solution, but you can . Add a background image like so, where the image is the the width of column you need.
Any tips you've got gratefully received!
BTW, I've tried some experiments in the liamdelahunty.com/tips/layouts folder.