H
Hiroshi Satori
I have been putting together a website for a business, and I've run into a
few problems with getting my tables used for layout to render properly in a
few browsers (as always), namely Mozilla, IE, and Opera.
On the left side of the page, I require several table rows for the
navigation bar; the center, of course, contains the content of the page, and
thus should span as far as it needs to fit all of its text, resizing the
navigation bar along with it.
The method that I always use and highly prefer is that of using a nested
table to achieve this effect. It's easier to read code-wise and makes sense
to me. The middle part of the page consists of two table cells: the first
with a nested table (a cell of which stretches to the height of the content
cell) which holds the links
for the navigation bar and the rest of the left side of the page; the second
with the content.
Of course, in order for the nested table to fill all the area in its
surrounding cell, it's width and height must be set to 100%, as tables
generally size themselves enough to fit the stuff they hold.
This works perfectly in both Mozilla and IE, but not in Opera. It seems that
Opera doesn't much care for the height="100%" setting (or any percentage for
the height attribute, for that matter). And as the HTML spec defines width
and height as deprecated, I decided to try and find a different way to
accomplish this.
I tried using rowspan for the part of the layout like the content cell
described above; again, worked exactly as I had intended in Mozilla and IE,
but not in Opera. Apparently, if you use this method, Opera will always
stretch the last row of those that are spanned to fit the height of the cell
that is spanning them. Even if you specify heights for all but one (leaving
that one to be stretched), Opera will still stretch the last cell.
Which is the better method to employ: nested tables or rowspans? Or is there
another method that is made with enforced standards? How can one get the
same rendering in Opera?
few problems with getting my tables used for layout to render properly in a
few browsers (as always), namely Mozilla, IE, and Opera.
On the left side of the page, I require several table rows for the
navigation bar; the center, of course, contains the content of the page, and
thus should span as far as it needs to fit all of its text, resizing the
navigation bar along with it.
The method that I always use and highly prefer is that of using a nested
table to achieve this effect. It's easier to read code-wise and makes sense
to me. The middle part of the page consists of two table cells: the first
with a nested table (a cell of which stretches to the height of the content
cell) which holds the links
for the navigation bar and the rest of the left side of the page; the second
with the content.
Of course, in order for the nested table to fill all the area in its
surrounding cell, it's width and height must be set to 100%, as tables
generally size themselves enough to fit the stuff they hold.
This works perfectly in both Mozilla and IE, but not in Opera. It seems that
Opera doesn't much care for the height="100%" setting (or any percentage for
the height attribute, for that matter). And as the HTML spec defines width
and height as deprecated, I decided to try and find a different way to
accomplish this.
I tried using rowspan for the part of the layout like the content cell
described above; again, worked exactly as I had intended in Mozilla and IE,
but not in Opera. Apparently, if you use this method, Opera will always
stretch the last row of those that are spanned to fit the height of the cell
that is spanning them. Even if you specify heights for all but one (leaving
that one to be stretched), Opera will still stretch the last cell.
Which is the better method to employ: nested tables or rowspans? Or is there
another method that is made with enforced standards? How can one get the
same rendering in Opera?
