DHTML Lab - dhtmlab.com - IE4 / IE5 Rendering Differences | 3
IE4 / IE5 Rendering Differences
IFRAME object width
Author Intent
To display an IFRAME object that has a total width and height of an author-specified value.
In our example, these values are 200 pixels and 100 pixels. This IFRAME will display scrollbars if its content exceeds the allotted screen space. Conditional scrollbar display is enabled through the CSS overflow property.
HTML
<IFRAME SRC="somepage.html"
WIDTH=200 HEIGHT=100 STYLE="overflow:scroll"></IFRAME>
or
<IFRAME SRC="somepage.html"
STYLE="width:200;height:100;overflow:scroll"></IFRAME>
Your Browser Result (Live)
| <-- 200 pixels --> | ||
| ^ 100 px v | ||
IE4 - IE5 Results (Illustrated)
| IE4 | IE5 |
 IE4 gives us the display we want, as the scrollbars are contained within the specified width and height. |  Scrollbars are placed outside the specified width and height in IE5. |
Here, the browser logic is the opposite of what it was for the file upload object on the previous page. IE4 contains the object to the specified dimensions, whereas IE5 expands its screen space.
Solution
Avoid using the CSS overflow property for IFRAMEs
Since the default behavior of IFRAMEs is to display scrollbars if needed, omit the property altogether if scrollbars are required.
If you insist on including a scrollbar-designator, perhaps in the interest of style, use the HTML SCROLLING= attribute:
<IFRAME SRC="somepage.html"
WIDTH=200 HEIGHT=100 SCROLLING=YES></IFRAME>
Both solutions will constrain your IFRAME display to your specified width and height.
IFRAME objects are not very common, but extremely popular tags, like DIV, also have width-rendering problems.
Produced by Peter Belesis and
All Rights Reserved. Legal Notices.Created: Oct 19, 1999
Revised: Oct 19, 1999
URL: https://www.webreference.com/dhtml/column26/iframe.html
Find a programming school near you