iFrames vs. Overflow

#1

Technically, I think we should be using each option at it's appropriate time -- they're different technologies.

iFrames require a separate script/file/request for it's contents, so they're designed to behave like an embedded frame which can behave independently of it's parent (like additional HTTP requests to further pages).

Overflowed content on the other hand exists within the current page, and is just being presented differently — it's purely a stylistic treatment of inline content.

Personally, I'd only use either of them when they technically made sense. I'd be less inclined to worry about the scroll wheel problems, but would certainly take the general accessibility issue with frames (an iFrame is an embedded frame) into consideration.

I imagine overflowed content makes a lot more sense "within the page", and if there's a problem with scroll wheels, complain to the browser manufacturers instead of choosing an inappropriate technology.

Justin French (http://indent.com.au)

#3

I agree with Justin(1) - iFrame's use of a completely separate document puts it in a different category for me. Using an iFrame just to get a scrolling area of content brings us back to the separation of style and content since you'd have to hard-code the scrolling area.

Having said that, the support for overflow:scroll isn't exactly great. IE/Mac is the main offender, in my experience, and I had a bit of a battle with it when I was doing my Zen Garden design. For some reason while the content div correctly scrolls, it's height is still rendered invisibly. In my case this inserted a huge gap between the bottom of the design and the bottom of the page. I could live with it but it could be a big drawback for some projects.

I know what you mean about the mousewheel thing - it drives me mad, but we have to put up with that in Flash already. Actually, there is a way for Javascript to get access to the mousewheel in IE so perhaps someone should write a little script to hook up scrolled divs...

Mike Stenhouse (http://www.donotremove.co.uk)

#5

I just finished a site that i had to use iframes. It was too risky to use a coded scrollable div. Id prefer to use a css overflow technique but the iframe got the job done and it validates, so im happy.

Colin

#7

The overflow disadvantage isn't in its design; it's clearly a browser bug that they don't scroll with the wheel. I'm sure it will be fixed soon. Hopefully.

The only advantage other than scrolling that the iFrame has is loading a separate file. This isn't necessary for those of us with server-side technology, but for those with crappy hosts, it can be important.

I must say this: never, never, *NEVER* use either method when the box in question extends beyond the viewport. This is TERRIBLE design, forcing the user to scroll the viewport *and* the box. For an example of this, see Mess. I just can't stand it. :P

Chris Vincent (http://dris.dyndns.org:8080/)

#9

hi,
iframes mess with your history unless you script it, and I have never managed that xbrowser, overflow does the same job - as long as you dont need external content, I use objects.

dave

#11

I think you have found a bug for FF on WIN.

Bugzilla people!

phil baines (http://www.wubbleyew.com/blog/)

#13

Using CSS's overflow property would be the true way of doing it, but as for the scrollwheel/browser implimentation issues... IE/Win works as it should (or would expect) and you can scrollwheel when the cursor is hovered over the area.

Other browsers, such as Mozilla will only scroll once that area is in focus (by clicking on it).

Can't speak a word about Mac browsers w.r.t this as I've never used one, well... since System 7.x anyway.

Jonathan Stanley (http://lambcutlet.org/)

#15

Chris: I use not one, but *two* iFrames that extend beyond the viewport in my homepage. People don't seem to object at all.

The iframes allow me to keep the site directory structure tidy (the News from the 'net section is a separate blog from the main one, and the shoutbox is an application in and of itself).

I think these are altogether different beasts. I also *like* to have separation of content. Even if I can configure my CMS to dump content from separate sources to the same file, and display that in a text-overflowed div, I don't want to. Much easier to work with separate files. By the way, Scrivs: I've noticed that Google does index the stuff in the iframes, although it appears not to give it as much "weight" as the rest of the site's content.

iframes are part of XHTML 1.0 Transitional, so it's no sin to use them. Until we move to XHTML 1.0 Strict, I see no reason to stop using them.

Sergio (http://overcaffeinated.net)

#17

For those of you with Firefox/Mozilla-suite as browser, it seems we can't definitively say it does or does not work. It seems to work for some, and not for others.

For me, both Firefox and IE respond with the desired behavior on both websites.

I can use the scroll wheel on both sites without worrying about focus (e.g. I can scroll any area just by pointing to it, even if I've just clicked within a search box.)

I'm on WinXP using a Firefox 0.8 nightly build from 06 Feb 04 and MSIE 6.0 from xp sp2.

p.s. i just realized that (in firefox) i cannot scroll left to see the whole textarea of this comment box when my window is not large enough. what's that about?

brewthatistrue

#19

using a php include statement like: inserted into the overflow div, will serve external text into your document without having to generate extra html files!

for those of you un-versed in php just change your page's extension from ".htm,html" to ".php", all the dynamic functionality with less mess

shogun

#21

Just comes down to the best tool for the job. iframes is a useful thing when you need to include another page in a page, particularly when you need to include a page from another server, or if you're trying to reliably include dynamic data on a page which is run by someone with limited skills or on a server that can't do anything dynamic (for example, advertising... the only place I've ever used iframe personally was when I wrote a php banner exchange program)

overflow divs... I'm sure there must be some reason to have them, but damned if I know what it is. I can use textarea if I'm trying to dump in a bunch of stuff for someone to copy and paste, code samples or whatever.. I really can't think of any good reason to inflict scroll bars on anyone. I suppose if you were doing some kind of reporting application and you wanted more space than your layout provided you with for certain detailed entries... but even then, I'd consider that a place to fix the layout, not dump a second set of scoll bars on the page. Just because users know how to scroll now and will do it if they need to doesnt mean they like it any more.

Hmm. Maybe if you were dumping a big image in and wanted to use a small viewport for it so people would have to scroll to see the whole thing, one piece at a time... but that's not really a normal usage, that's just a way to show off the technology. Dunno. Drawing a blank. Anyone have any good technical reason for this, or is this just a particularly misguided form of eye candy?

JC (http://thelionsweb.com/weblog)

#23

JC states above an alternative way of doing what, for example, Jon Hicks has done at his own site using text:overflow. Helpfully he explains the technique here:

http://www.hicksdesign.co.uk/about/colophon.php

The fact that the content area must be scrolled means that the page doesn't have to be, allowing the navigation to remain fixed and visible.

Regarding the disadvantages of iFrames from the point of view of SEO, my experience is the same as Sergio's in his earlier comment: that, although Search Engines will index the content of framed pages, they are assigned 'less weight'.

This isn't the only problem, though. There's another which ought to be fairly obvious. The separation of the content of a page from the page that it seems to exist on (eg, the use of an iFrame to hold the contents of a homepage) means that the homepage's visibility to search engines, and therefore its ranking, is somewhat reduced. Google specifies that pages using frames must use tags to provide alternative content, or at least links to alternative content. I have found in the past that not doing so has quite a drastic effect on ranking, regardless of whether framed pages are indexed.

Many people who use frames don't account for the possibility that users might arrive at their site, via a search engine, on what should be a framed page. Those people won't experience such a page as framed, since they've navigated straight to the content found by the search engine, bypassing the frame. Often the site's navigation is located on the frame page, with no such provision on the FRAMED pages. Sometimes some kind of redirect script is used to direct visitors from search engines to the frame page. Personally, I hate such redirects. Instead, providing navigation on pages that are intended to be framed should, I think, be standard practice.

I stopped using frames of any kind some time ago. ;)

Martin

#25

Oops.

"Google specifies that pages using frames must use noframes tags to provide alternative content...".

My apologies.

Martin

#27

After 22 replies, scrolling through this page gets a little ridiculous. You should be using iframes here.

Matthew

#29

Well lets sum this up: overflow: auto is a w3c standard. Iframes aren't. Sorry, but I'm a standards or death kinda guy.

Scrolling is a browser behaviour, you can't really demote one method below another just because it doesn't work in your particular browser. fx0.8 has overflow scrolling, anyway.

Jon Hicks came up with a solution to the mousewheel in most browsers problem, here, but it looks like the test page itself no longer exists.

David House

#31

after reinstalling windows, it seems that my ease of scrolling on both sites was because of my mouse (and accompanying software), and not related to any browser.

brewthatistrue

#33

#30 JC: It's been downgraded to xhtml transitional (it's not in strict). For me, that means it doesn't exist.

David House

#35

JC - Uhhh, I would have the comments poster and active discussions, categories and monthly quick links site outside the iframe so I wouldn't have to scroll for ten years just to get to them?

Matthew

#37

Once again I haven't read all the posts, because I simply don't have enough time :P

My opinion of i-frames/overflow is that they're both annoying. I hate scrolling down a page only for the focus to set on the i-frame/overflow.. which isn't what I want to be scrolling down. It's one of the most annoying things on the web imo.

I used to use them early on in my career, but haven't found a use for them since.

Robert Lofthouse

#39

Iframe, or any frame, will overlay a div in another frame that is used to display a popup submenu. So when the hidden div for the submenu is displayed, it still appears under the iframe and ignores z-index.

This is not true in FoxFire but is true in NS 6.2, IE 5.5 and Safari. Using an overflow div instead of an iframe avoids this problem.

But the z-index problem gets worse when the submenu div attempts to overlay an or element. Those elements will always overlay the submenu div in some browsers and OS. However, an iframe will overlay those elements. So a popup iframe will always be on top but a popup div may not.

Any sane person would try to avoid this entirely but I can't in my application.

Roger Kovack

#41

Hi,

I am not sure whether anybody has noticed this before or mentioned it above.

"I don't like this because it doesn't allow me to use the wheel." ---- for this I think I have a solution. When overflow tag is used within a div tag it completely acts like an iframe, I mean it scrolls by using the wheel in your mouse.

Correct me if I am wrong.

Raaj

Raajkumar