Site Information

W3C Validation:


Site hosted by:


Frames & Iframes


Iframes are pretty cool too, not quite as interesting as frames, but they are ok.

They function more or less like an image inserted into your page. You can set the size of the iframe manually, like an image tag, or through CSS, using this method:


iframe {
	height: 250px;
	width: 480px;

or relatively:

iframe {
	height: 75%;
	width: 80%;

Remember that % values refer to the container element, not the page itself.

Of course, if that absolute measurement doesn't fit your page, too bad. If you set it relatively, you have to set it against another container element. This element must be in one higher container that is itself absolutely sized. This page, for example, is an iframe contained in the top level web page. The iframe is contained in the center of the page, the light blue area, but the whole page is measured against the body, html of height:100%; and width:100%;. Like most other HTML rendering, it allows you to be quite sloppy with your code, and it will still render more or less correctly, or as the coders think you want it to render. Mozilla/Netscape, Opera, and Konqueror/Safari, all tend to be more precise in their interpretation of W3C standards, and so usually follow the rules more closely, which means you can't depend on the browser to make up for your mistakes.

Here is a brief sample, with all the non-essential code stripped away:

<title>—Web Design</title>



<div align="center" id="mainblock">
<div id="maininnerblock">

<div align="center" id="row3-b2">
<iframe src="overview.php" scrolling="yes" frameborder="0" id="ContentCenter" 
name="ContentCenter" height="400" width="400">
If you can read this, it means that either your browser 
doesn't support iframes, or that you have
iframe support turned off. To view the page 
content, click <a href="overview.php"
<script language="javascript" type="text/javascript">
fill_frame('ContentCenter', 'overview.php');

In this example, we have left out some of the code that would normally run it, and put in manual sizings.

As you can see, it works more or less like a frame, minus the frameset tag, and the page is a standard html page, with a body tag. The noframe feature is found by simply inserting some text between the <iframe> and </iframe> tags. Whatever is in there will be either rendered by a non-iframes compatible browser (currently only Netscape 4 has enough users to worry about, all other browsers to be found in any meaningful numbers support this fine.

Notice that there is a link in that section to the content of the page. That's so users who can't or won't use iframes can still access it, but it's primarily so that search engines such as google can still spider through all the pages of your site.

Search engine tricks:

Despite myths to the contrary, search engines read these kinds of pages (as long as you follow the above procedure on all your frames and iframes) fine. They can also deliver the surfer to whatever page that the search engine has listed. We use a small javascript thing to redirect them to the requested page when they come in through a search engine, in this case using cookies. That has been working quite well, and seems to be reliable on all modern browsers that have DOM javascript support (that means everything later than IE and Netscape 4).

We will put up these scripts as time permits, although there are various versions available on the internet, although we did not find any that did the job for us as well as what we came up with, although of course we based ours on what we found on the net.

You can also use a similar trick to place the page in the user's favorites folder, another thing framed pages have been charged with not allowing. We do not do this, mostly because our sections are pretty obviously labelled, and we figure anyone who wants can easily find where they were again by putting the section page, which is a separate page, in their favorites. We may add an 'add to favorites' link that does this sometime in the future, but there is no huge advantage to be gained from this in our opinion.


Iframes are sort of the poor cousin of frames, and the bone the W3C standards group threw to the web world to try to get them to forget about the far more powerful frames that they had so cruelly deprecated in their attempt to drive them out of existence. One is tempted to ask these fools why they implemented them in the first place, but our suspicion is that, like most programmers, you can only have a more or less linear conversation, forget about a dialogue, with people like this, so we just have to live with their limited vision of the web. And iframes too are being phased out, since the w3c has not included them in the new XHTML 1.0 strict doc type.

But that's ok, it's always been that way. And they have done a pretty good job with CSS, so it's not all bad. Especially once the position:fixed; attribute actually starts being implemented, then you can do a lot of stuff you could only do with frames, such as having a nav bar that doesn't move as the page scrolls. This feature is not very well supported, and only works in modern browsers under certain conditions (it has to be aligned to the left or right, all the way, and cannot be part of a floating section, such as a self-centering div or table content area, like many pages use. Use of position:fixed; must for the time being considered still fairly experimental.

For an example of this, go to Tapio Markula's website. He had made a nav bar that floats to the left using this CSS feature, but it's very difficult to do this and have it work consistently. He has had to create many browser specific stylesheets which he loads with a PHP script depending on what browser is visiting his site. We have a more complex version of this script in our browser detection scripts section, if you are interested in doing something similar.

Because of the lack of cross-browser support, he has abandoned that method in favor of javascripting in the postion of the supposedly fixed left navigation bar.

For now, however, iframes are great tools if used properly, which is why we chose them for this site.

Web Design Site

Please go here if you are looking for our web design site, Phoenix Web Technologies.

Rather than clutter up this site with client information, we decided to create a separate web design site. Check it out, it's pretty cool, has super advanced CSS construction.