Click to See Complete Forum and Search --> : Tables in Mozilla


Vic
12-26-2005, 04:30 AM
I have a table that stretches the widht of the screen and has multiple cells. I am trying to place in one cell content that may potentially overflow the dimensions of the cell.

If I put OVERFLOW: hidden in the style of the cell, the cell ignores this and stretches to the dimensions of the content.

I tried putting a <div style='POSITION: absolute; LEFT: 0px; TOP: 0px; WIDTH: 100%; HEIGHT: 100%; OVERFLOW: hidden'> tag around the cell content, and it works pefectly well in IE, but fails in Mozilla (IE inteprets HEIGHT: 100% in relation to the height of the cell, whereas Mozilla inteprets it in relation to the entire screen - why???).

Could someone advise how to achieve this - apparently not so simple - task?

Thanks in advance...

Vic
12-26-2005, 04:37 AM
In supplement to the question above - I tried to force the dimensions of the table by using TABLE-LAYOUT: fixed attribute, and it again renders nicely in IE, but completely messes up in Mozilla. I'm not sure why this happens?

Vic
12-26-2005, 05:03 AM
How is HEIGHT style interpreted in Mozilla? According to W3C:
height: percentage - Integer followed by a percent sign (%). The value is a percentage of the height of the parent object, which must be specified explicitly. Negative values are not allowed.

But when I create the following:
<table cellSpacing=0 cellpadding=0 style='WIDTH: 100%; HEIGHT: 100%'>
<tr style='HEIGHT: 50px'><td>
<div style='WIDTH: 100%; height: 100%; overflow: hidden'><img src='images/picture.gif'></div>
</td></tr>
<tr><td>Rest of the Table</td></tr>
</table>

The height of the first row corresponds to the height of the PICTURE not 50px as specified. Again, this works well in IE and only fails in Mozilla.

ShrineDesigns
12-26-2005, 01:20 PM
<div style='position: absolute; width: 100%; height: 100%; overflow: hidden'>...</div>