Differences in rendering elements between Mozilla/Firefox and IE

[Sergey Ilinsky]

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?

 

[kaeli]

<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.

It isn't supposed to get 25% of the DOCUMENT height.
It is relative to its container - which is not the document. It's the table
cell. You're probably looking at this in IE quirks mode, since I don't see a
doctype. Don't expect different browsers to render the same when you don't
give a doctype with a URL.

Also, you might want to validate your html. I'm pretty sure there is no
attribute "height" for table. And the height attribute of TD is deprecated.
http://www.w3.org/TR/html401/struct/tables.html#h-11.2.1

The above will render differently depending on the doctype. Which you didn't
mention.

BTW, this has nothing to do with javascript, so it's OT here. You'd get
better answers at comp.infosystems.www.authoring.* groups.

--
--
~kaeli~
A little rudeness and disrespect can elevate a meaningless
interaction to a battle of wills and add drama to an
otherwise dull day.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace