Stinking iframes: www.about.com

The development of the web killed frames, framesets. This is very great, frames just did not work, no details here, there were so many people explaining it before. But now, there is something stinking with IFRAMEs as well.

On most (of the few) sites using IFRAME the IFRAME content does not have a separated navigation, they display small related information to the actual webpage. So the FRAME tag problem with bookmarking, sending links could be valid here as well, but people have learnt to avoid it. Good.

HEIGHT of the new IFRAMEs is a problem I often see. I have my browser configured to 12px minimum font size, this is not big at all, you will see the screenshots. But somehow the content with the fonts installed on my computer (Mandrake Linux 10.1, X.org, Firefox, Opera, Konqueror) never fits in the IFRAMEs the designers make. Webpage layout, content and functionality should NEVER depend on text length, the font redering system component is differnet on every computer.

The only thing you can rely on is that "A" will have the content and meaning of "A", but you never know the pixel dimensions of it. Especially if you want to measure a lengthy paragraph, you are lost. We have learnt that when we first wanted to position a DIV by absolute positioning, laying under a paragraph, why did we forget it by now?

Examples are from the otherwise great "about.com", but can be found on many other sites.

On these images the "Print and Scan Offers" submenu is in an IFRAME, without mouse scroll-wheels I could not even access the last item.

This is just an ad, there was another one on which I cannot even click without scrolling down for the button. :-)

This last one is inside the page content. Fortunately only 1 pixel left out, the underline of the last link, but also scrollable with the mouse wheel. "Of course" scrollbars are disabled on all these IFRAMEs.

Another question is accessibility. Having your main navigation divided into separated IFRAMEs is very bad. One menu should be after another, not in completely different documnets.

For the time being I would advice including the content of these IFRAMEs in the normal content of the page, that will make document's structural flow as it "looks" when rendered, and will avoid wrong guessing the height of specific menus or content elements.

Related links

www.about.com where I've made the example screenshots, from Best printers of 2004.
Why Frames suck - by useit.com. If you are new to the internet you can find historical detais here.