Dynamically Resized IFrames - Part 1: Bug Workaround
Summary
This is a supplementary article to Dynamically
Resized IFRAMEs - Part 1: Eliminating Multiple Scroll Bars.
The Bug
The bottom of your IFRAME gets chopped off.
When using <IFRAME HEIGHT=100% WIDTH=100%> to make
an inline frame that fills the table cell it is in, a bug
(?) in Internet Explorer sometimes makes the IFRAME larger
than it should be, and when inside a table cell, the bottom
of the IFRAME gets chopped off. You can no longer see the
bottom of the right side scroll bar, and some IFRAME content
may be hidden.
The Workaround
Make sure there are no "adjacent" elements on the
page. Every element that affects the content height must be
nested inside its own separate table row and cell. For example,
if you have two adjacent paragraph tags, you must separate
them into two separate TD table cells.
Imagine that IE will only calculate the height of the "first"
element in the table cells. Hence every page element (that
affects the height anyway) must have it's own table cell.
Example
Suppose you have a typical page that has a top banner with
logo, etc. and then the bottom section is the content region.
You may start with two separate tables at the root of the
page, like so:
<TABLE>
<TR>
<TD>banner logos, global navigation, etc.</TD>
</TR>
</TABLE>
<TABLE HEIGHT=100%>
<TR>
<TD HEIGHT=100%>
<IFRAME HEIGHT=100%>
</TD>
</TR>
</TABLE>
If you were to preview this page, you would find the IFRAME
bottom would be chopped off by exactly the height of the top
TABLE.
To fix this page, change it to a single root-level table
like so:
<TABLE HEIGHT=100%>
<TR>
<TD>banner logos, global navigation, etc.</TD>
</TR>
<TR>
<TD HEIGHT=100%>
<IFRAME HEIGHT=100%>
</TD>
</TR>
</TABLE>
Background
The main article
discusses a technique for making an IFRAME expand to fill
the browser page. The technique allows for the IFRAME to use
up all the "remaining" space in the page, after
other page content gets the minimum space it needs, by using
the HEIGHT=100% attribute on the IFRAME and the containing
TD and TABLE tags.
A bug in how the browser calculates what 100% means can lead
to truncated IFRAME scroll bars; or an extra browser scroll
bar when there is no content that needs it.
Do what I mean, not what I say
HEIGHT=100% tells the browser to expand the element to the
same pixel size as the parent "container" size,
regardless of what other "sibling" content might
be in the same parent container.
Suppose your IFRAME is set to 100%, and it is inside a table
cell that also contains a 20 pixel tall image directly above
the IFRAME. If the table cell were to be 100 pixels high after
growing to fit the browser client area, then the browser would
diligently set the IFRAME height to 100% of the table cell
size - also 100 pixels.
But the 20 pixel image is still there and needs to be displayed.
Hence the browser would display the image first, and then
show you the top 80 pixels of the IFRAME, with the bottom
simply getting chopped off.
See the sample
page to view the problem. Be sure to shrink the wondow
small enough to see the bottom of the IFRAME get truncated.
Even though the IFRAME needs more space to show the whole
element, the table cell does not "grow", since this
would end up in a vicious circle as the IFRAME would theoretically
also have to grow to ensure it stays 100% of the table cell
size. Likewise the IFRAME does not "shrink" to fit
- which would be the logical thing to do, since that's what
sibling table cells do when one is set to 100% and the others
are not empty.
An Only Child Is A Happy Child
To avoid this strange bug, simply make sure that there is
no "sibling" content above or below the IFRAME in
the same table cell. If you do need content above or below
the IFRAME, just add a new table row and cell to "wrap"
it, and then the 100% setting in the table cell that holds
the IFRAME will work as expected.
Family Tree
You also have to make sure this is true for all ancestor
table cells. Any cell that contains multiple "sibling"
content elements will have to have that content wrapped in
a table cell to ensure the browser properly includes that
contents size in the total height calculation, and then gives
the correct remainder - and no more - to the cell that ultimately
holds your nested IFRAME.
|
