Webmaster Forum / HTML, CSS, Scripts / JavaScript / January 2005

Well, while working on a rich ui with DHTML I discovered the following
problem:
Mozilla/Firefox seems to be wrong when rendered elements with sizes
given in percents and that are placed into another elements with
percentage sizes, if the content overflows them (of course, overflow is
set to the value of "scroll")

To check the written above please use the given below code

<table style="" height="50%" width="100%">
<tbody>
<tr><td height="25%"><br /></td></tr>
<tr><td height="50%"><div id="eContainer"
style="width:100%;height:100%;overflow:scroll;"><br />a<br />a<br />a
<br /> a<br />a<br />a<br />a<br />a<br />a<br /> a<br />a<br />a<br
/>a<br />a<br />a<br />a<br />a </div></td></tr>
<tr><td height="25%"><br /></td></tr>
</tbody>
</table>

You see, that DIV element got much more than 0.5*0.5=0.25 = 25% of the
available document height. Moreover, this element doesn't offer you to
scroll its content.
Why? Can somebody give an explanation and a hint how to get the same
behaviour way that IE has (IE renders a layer with 25% height)?
Why does Mozilla/Firefox render elements proper way when the content
doesn't overflow?