HTML and CSS —

Frames Without Frontiers

If you'd like to have a frame-based site with no borders, you can get rid of them. If you're following the rules, authoring borderless frames is easy. You simply add the attribute and value frameborder="0" within the frame tag (see Example 6-11).

Example 6-11. Working with borderless frames
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Borderless Frames</title>
</head>
<frameset cols="200,*">
<frame frameborder="0" src="menu.html" name="menu" marginheight="5" marginwidth="5"
 noresize="noresize" scrolling="auto" />
<frame frameborder="0" src="main.html" marginheight="9" marginwidth="9"
 noresize="noresize" name="content" scrolling="auto" />
</frameset>
</html>

You can see the borderless results in Figure 6-8.

Figure 6-8. Look ma, no borders!

Of course, this works only in modern browsers because originally Netscape and Internet Explorer introduced their own, proprietary means of getting rid of frame borders.

Netscape browsers earlier than 6.0 allow for borderless frames in these circumstances:

  • The border attribute is set, in pixels, to a numeric value of 0.

  • The framespacing attribute is assigned a no value.

Older versions of Internet Explorer produce borderless frames under these conditions:

  • The frameborder attribute is set, in pixels, to a numeric value of 0.

  • The framespacing attribute is assigned a width, in pixels, to a numeric value of 0.

Each browser requires either a different attribute to control width or a different value to control spacing. It looks confusing, but if you stack attributes, you can easily create borderless frames that will be read by both browsers without difficulty. This technique results in two syntax options:

<frameset frameborder="0" framespacing="0" border="0">

or

<frameset frameborder="no" framespacing="0" border="0">

Example 6-12 shows how our example so far might look with the invalid syntax.

Example 6-12. Supporting borderless frames in older browsers
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Borderless Frames</title>
</head>
<frameset frameborder="0" framespacing="0" border="0" cols="200,*">
<frame src="menu.html" marginheight="5" marginwidth="5" noresize= "noresize"
 scrolling="auto" />
<frame src="main.html" marginheight="9" marginwidth="9" noresize="noresize"
 scrolling="auto" />
</frameset>
</html>

NOTE

I don't generally recommend breaking validation, but here's a case in point: If you want real backward compatibility with certain aspects of HTML, you have to sometimes break the rules. Fortunately, older browsers are becoming far less common, so support for them is becoming less necessary.