Section 14.3. Frame Function and Appearance

14.3. Frame Function and Appearance

By default, frames are separated by borders with 3D beveled edges, and each frame has a scrollbar if its contents do not fit in their entirety. You may want to change these settings using the attributes for controlling frame functionality and presentation.

14.3.1. Scrolling

The scrolling attribute within the frame element controls whether scrollbars appear within the frame, regardless of the frame's contents.

The default setting is auto, which behaves like any browser windowno scrollbars display unless the contents are too big to fit entirely within the frame. The yes value should make scrollbars appear, even for mostly empty frames, however, most current browsers seem to treat it the same as auto. To make sure scrollbars never appear, even when the content is larger than the available space, set scrolling="no".

In Figure 14-5 both frames display the same text document, but scrolling is set to auto in the top and no in the bottom frame.

14.3.2. Disabling Resize

By default, any user can resize your framesoverriding your size settingssimply by clicking and dragging on the border between frames. You can prevent users from doing that by adding the noresize attribute to the frame element.

Figure 14-5. Setting scrollbars with the scrolling attribute

Be careful that you're not disabling functionality the user needs, though; if the frame contains text, chances are good that some users may need to resize.

14.3.3. Frame Margins

As you probably already know, browsers hold a margin space on all sides of the browser window, preventing a document's contents from displaying flush against the edge of the window. The width of the margin varies from browser to browser.

Frames have margin attributes that allow you to control (or remove) the margins on any frame-enabled browser. To adjust the top and bottom margins of a frame, specify a number of pixels for the marginheight attribute. Use the marginwidth attribute to specify the amount of space for the left and right margins. They can be combined as shown in the example in Figure 14-6.

The example shows the same HTML document (containing only a graphic) loaded into two frames within a frameset. The left frame has specific margins set. The right frame has its margins set to zero, allowing the contents of the frame to be positioned right up against the edges of the frame.

14.3.4. Frame Borders

By default, framed documents display with a 3D border between each frame. These borders visually divide the sections and also serve as a handle for resizing. The HTML 4.01 specification allows for borders to be controlled only at the frame level (in the frame element).

Most browsers also support the nonstandard method of setting borders and border thicknesses for the whole page in the frameset element. Bear in mind that this nonstandard use of border attributes will cause a document to be invalid because it does not conform to any DTD.

Figure 14-6. Effects of setting frame margins

Browsers vary in their support of border attributes. It is best to do plenty of testing (including in older browsers) to be sure you can live with the different results.

14.3.4.1. Turning borders on and off

The frameborder attribute is used to turn the 3D borders between frames on (with a value of 1) and off (0), like a toggle switch. The W3C Recommendations specify that the frameborder attribute should be used for each individual frame element, but most browsers support frameborder in the frameset element as well (see previous note). Applying a frame border to a single frame draws the border on all sides of that frame. It will look as though the neighboring frames have their borders turned on as well, even if they are turned off.

14.3.4.2. Border thickness

You can use the nonstandard border attribute in the frameset element to specify the thickness of the frame borders in pixels. The default thickness varies by browser. Although border is not part of the Frameset DTD, it is fairly well supported by current browsers.

Turning the frameborder off removes only the 3D border, but it leaves a gap between the frames. To remove this gap and give the page a smooth, seamless appearance, use the border attribute with a setting of 0 pixels: <frameset frameborder="0" border="0">