logo

Mimic Frames Using CSS2

It's almost four years to the day since I published an article with the catchy title Benefit from frames without getting any pains. It showed an IE-only way to mimic frames in a page by using the overflow property. Here's the example page. Notice it only works in IE, but degrades well in other browsers.

Anyway, I'm reminded of this as I research the article I've got planned for April this year. I'll save the topic of the article for a surprise, but I'll share what I just learnt: you can do the same thing now with standards-compliant CSS. Using Fixed Positioning you can get more recent browsers such as Mozilla, Safari and Opera (but not IE) to do the same thing. Here's an up-dated example.

While the new standards-compliant version is a lot cleaner in terms of code it's messy in other ways. For a start it doesn't degrade well in IE. Also, the way it presents the scroll-bar is counter-intuitive. In the IE-only version the scroll-bar appears to be nested within the faked frame. In the newer version the scroll-bar appears to affect the whole page, whereas only part of it actually moves.

The article, which I hope to have done within a week or so, shows a way to get both approaches working for one page and addresses a few other issues...

Comments

  1. It looks great. There surely are advantages of it's use. Made me curious about the article. But what does the text in your example say / mean? What is it? Latin? Esperanto? Is it offensive? Are you declaring your love to Lotus Notes / domino? ;-)

    • avatar
    • Jake Howlett
    • Thu 31 Mar 2005 05:59

    It's Esperanto Edsko. Made using this {Link}

    No idea what it might mean. I'm pretty sure it doesn't declare my love for Notes though!

    • avatar
    • Andrew Tetlaw
    • Thu 31 Mar 2005 17:53

    Jake, I think the only reason that the original article demo doesn't work in Moz is that the overflow css is applied to a 'span' element.

    This is wrong, because a span is an inline element not a block. If you swapped the span for a div I bet it'd work in Moz fine.

    Of course then you have problems with the div scroller and the body scroller appearing and for some reason Moz seems to have problems with height:100%; in soem situations. But then agsin I'm not surprised, trying to read the w3c standard about the height attribute does my head in as the calculation changes according to many factors about the element and its parent and children. So perhaps Moz is doing it right after all...

    • avatar
    • Jake Howlett
    • Fri 1 Apr 2005 07:51

    Thanks Andrew. I should have looked at that code more closely. It's four years old and just plain bad. Woops. Wouldn't do that now. I'll see what I can come up with using divs and overflow in Moz/IE...

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Thu 31 Mar 2005

Share This Page

# ( ) '

Comments

The most recent comments added:

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

Elsewhere

Here are the external links posted on the same day.

More links are available in the archive »

More Content