spacer

home / experts / dhtml / column26
Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs

Logo

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)

IE4IE5


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

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint

All Rights Reserved. Legal Notices.
Created: Oct 19, 1999
Revised: Oct 19, 1999

URL: http://www.webreference.com/dhtml/column26/iframe.html