Framesets main content

View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.

Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
red icon problems gold icon warning: works in some situations or some browsers or needs care to display as you wish green icon OK in Firefox, Safari, Opera, Google Chrome and IE

Framesets date back to the early days of html. They are disliked by experts in webpage construction now because they have limited features and make serious problems for search engines. The main purpose is to avoid repeating parts of a page that occur on many pages of a website by setting a separate html page(s) in a frame(s) so that the repeated part(s) only have one source page so that later editing does not require every page to be edited.

After the first page has been opened and a link is clicked to take the viewer to another page which is inserted inside the original frameset a search engine still thinks the original page is being viewed. So if you have a frameset with a frame that can be changed from one product, say cameras, to another, say webcams, to another, say dvd players, the search engine still thinks you are looking at the cameras page.
However, framesets are still useful and major browsers still support them.

Framesets require a different Doctype. See w3.org Doctypes

PHP, a type of server side include (SSI), is the modern method of inserting a common section in multiple pages from a single source. PHP requires the host server to insert the section in the page before downloading and not all contracts for hosting support this feature.

A basic frameset

1 green icon This page shows a frameset with two frames at the top - a logo on the left and a header on the right of it.
The lower section is one frame with the main content.

There can only be one frameset on a page but they can be nested. If you have set the top frames with certain widths and heights and want to have different sizes in lower frames, start a new frameset within the main frameset as has been done with this page.

Framesets use the whole window so if you want margins you must build them into the files which are in the frames.
If you set the top frames with too much height, a viewer with a small height window will never see the bottom frame if it is below the window bottom. Remember to allow for the height of browser toolbars and the system tray.

An asterix as in rows="195px, *" indicates a flexible size, usually the remainder of the width or height. The first size is the allowance for the top frames and the * is for the lower frame. If there was a footer frameset in addition, the main frameset would need three row sizes such as rows="195px, 200px, *".

Links in frames will open by default in the frame which may be too small, especially if the link is to a page which normally needs a full window. Adding target="_parent" or target="_new" will direct the link to the same window full size or to a new window.

The transitional Doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> has been used for the header and main content pages because the target attribute for the links is not strict XHTML (but there is no alternative).

The <noframes> tag is used so that if a browser does not render framesets it will show alternative text. The content of the noframes tag needs a body tag as shown here.

Each page to be inserted in a frame has normal html code. The code for this frameset page is:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<meta name="keywords" content="Wickham, XHTML, CSS"/>
<meta name="description" content="XHTML and CSS Tutorial with examples"/>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<title>Framesets</title>
</head>
<frameset cols="100%" rows="195px, *" border="0">
<noframes><body><p>Your browser doesn't support frames</p></body></noframes>
  <frameset cols="110px, *" rows="195px">
  <noframes><body><p>Your browser doesn't support frames</p></body></noframes>
  <frame src="framesetlogo.html"/>
  <frame src="framesetheader.html" name="header"/>
  </frameset>
<frame src="framesetcontent.html" name="maincontent"/>
</frameset>
</html>

The main frameset has a width of 100% but two heights; one 195px and the other * which is unlimited.
On the first row there is a nested frameset which has two columns; the first 110px wide and the next * unlimited. The height of both is 195px.
The second row of the main frameset just has one frame which can use the full 100% width and the remaining height.
The individual frame pages framesetheader.html and framesetcontent.html have fixed widths or they would fill the remaining width at large window resolutions.

If you want to insert a web page with an external url, use http:// in front of the url like src="http://www.another-website.html".

Centering a frameset

It is possible to center a frameset in any larger screen resolution. Use the code:-

<frameset cols="*,500,*">
<frame src="leftframe.html"/>
<frame src="centerframe.html"/>
<frame src-"rightframe.html"/>
<noframes><body><p>This page uses frames, but your browser doesn't support them.</p></body></noframes>
</frameset>

The * creates a flexible width each side of the center farme 500px wide. The side frames could have a webpage with no content except a background-color or image.

Validation problems - the frameset page

It seems that no one cares about correct validation of framesets any more as it is very difficult to set frameset or frame borders to 0px without validation problems. There are validation problems with framesets even using the frameset Doctype.
Frameborder="0" or "1" in the frame tag is the proper way to code a border according to the HTML specifications but this causes a gap between frames in IE and Firefox with the browser default background color, although it does validate.
A CSS method style="border: 0;" does not validate but it does work in the frameset tag in IE and Firefox.
Using frameborder="0" in the frameset tag will leave a gap between frames in IE and this is a known problem as IE sets a default 2px gap between frames which shows as the browser default background color (usually white), but no white gap in Firefox or Netscape. It does not validate.
Using frameborder="0" in the frame tag will cause a wider white gap between frames in Firefox and the same 2px gap in IE but this does validate!
Border="0" in the main frameset tag will get rid of the gap between frames in IE, Firefox and Netscape but does not validate.

One solution for IE is to use framespacing="0" to get rid of the default 2px spacing between frames where frameborder="0" has been also been specified in the frame tag. This will validate if enclosed in a conditional comment but does not remove the border in Firefox or Netscape.

A solution to achieve validation for IE has been proposed here. It uses framespacing="0" for IE and the frameset code is put inside <!--[if ie] brackets. This enables code for IE to validate but code for Firefox and Netscape still requires a solution that does not validate.
Note the disclaimer right at the bottom: The validation method above will NOT get rid of the space between frames for Mozilla and Firefox browsers. So it is only a solution for IE.

Since neither the official frameborder="0" nor border="0" validates if used in the frameset tag but border="0" in the frameset tag works in IE whereas frameborder="0" leaves a 2px gap, it seems best to use border="0" which works in IE, Firefox and Netscape and ignore the validation error if you do not use the [if ie] method.
If you use the [if ie] method then border="0" in the frameset tag is also needed for Firefox and Netscape together with a separate conditional comment for IE using framespacing="0" in the frameset and frameborder="0" in the frames but the validation error will remain.

Frameset alternative uses and links in frames

A frameset could be used for a photo album or product reference list where the frameset comprised three full-width frames; the top and bottom frames being standard html pages for each photo or product.
The middle frame would contain an html page with a link to the previous photo or product, the image of the current photo or product and a link to the next one using code like:-

The links will open the previous or next html page in the same frame by default so code for the target included above could be omitted, or leave it if you want to be perfectly sure that it will open in the same frame.

Alternatives for targetting links are target="_self" (same frame), target="_new" or target="_blank" (new window), target="_parent" (parent of current frame, often full window if you don't have nested framesets) and target="_top" (loads in the full body of the window).

If you are using target="_blank" for several links on a page the viewer may soon have lots of separate windows open as well as the original page. Target="_new" works differently. The first link opens in a new window but after that the others open in the same new window so you only have the original page and one new window open.

You can also target a frame with a name using target="maincontent" if the frame code in the frameset file has name="maincontent". Although XHTML normally requires "id" to be used instead of "name"; in this instance "id" does not work so "name" must be used. See the code above in "A basic frameset".

This link opens in the maincontent frame (and creates scrollbars if necessary) because the code is:-

This link opens in the header frame (and creates scrollbars if necessary) because the code is:-

The target="header" example works in IE but sometimes does not work in Firefox online. It always works with a local file on Firefox so I don't know why the first example of target="maincontent" always works online in Firefox but the target="header" example sometimes doesn't work as they are essentially the same code. The only difference is that the name="header" is in a nested (inner) frameset in the frameset file while the name="maincontent" is in the first (outer) frameset so the target header frame is not in the same frameset as frame which has the link. Perhaps Firefox is sometimes affected if the frame with the link and the target frame are not in the same frameset. Luckily it's not often a problem. See the code above in "A basic frameset".

An inline iFrame

2 green icon An iFrame is similar to a frameset except that it does not need a separate frameset page with a frameset Doctype. The iFrame is inserted in a normal HTML page and can be inline with other text or flow with the order of div boxes.

<noframes> <p>This iframe contains iframephoto1.html</p> </noframes>

The code is:-
<p style="text-align: center">
<iframe frameborder="0" width="322" height="255" src="iframephoto1.php" title="Photo 1">

<noframes>
<p>This iframe contains iframephoto1.php</p>
</noframes>
</iframe>
</p>

The iFrame does obey the frameborder="0" code in IE and Firefox and will validate with a transitional Doctype (unlike the frameset Doctype when frameborder is used).

If you want to insert a web page with an external url, use http:// in front of the url like src="http://www.another-website.html".

The page included in the iFrame initially is Photo 1 which has a dummy transparent image in place of the left arrow which is not required for the first file, but is replaced by a left arrow link in the file for Photo 2.

Another example is shown on the page for Images in a row

An inline iFrame using target="..." from links

This is an example of using target="..." from several text or button links to open in the same iframe (or different iframes if you give each iframe a different name):-

Contents Useful Links Basic Webpage

<noframes> <p>This iframe contains various links</p> </noframes>

The initial file in the iFrame is introduction.php but is replaced by whatever file is the target of a link. I included frameborder="1" so that the iFrame is identified easily.

The code for the links and iFrame is:-

<p>
<a target="iframecontent" href="contents.php">Contents</a>
  
<a target="iframecontent" href="links.php">Useful Links</a>
  
<a target="iframecontent" href="basicwebpage.php">Basic Webpage</a>
</p>

<p>
<iframe frameborder="1" name="iframecontent" width="626" height="400" src="introduction.php" title="Introduction">

<noframes>
<p>This iframe contains various links</p>
</noframes>
</iframe>
</p>

Framesets and iFrames generally

The frameset page requires a frameset Doctype. Any html page in a frame or iFrame that contains links with the target code like target="_parent" requires a transitional Doctype. Any html page that contains an iFrame requires a transitional Doctype.

For additional information on framesets see w3.org

Notes

The stylesheet for this site which you will probably need to look at is here.

The middle frame is in a containing div with width: 730px;

A lot of codes have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.

Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.

If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-

or if there are many different styles, create a separate stylesheet:-

IE6 will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).

When looking at a page source for this site you may see code like <p>Little Egret</p> instead of <p>Little Egret</p>. The code < is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing xhtml code tags which are to be activated.

top | prev | next