HTML and CSS Reference
In-Depth Information
the external site's owner. Framing someone else's website and passing it off as your own isn't a very nice
thing to do, and can be illegal in some cases.
You can specify the size of an inline frame with the optional width and height attributes, or with CSS.
The frame typically defaults to around 300 pixels wide and 150 pixels tall if no dimensions are specified,
but different browsers will vary. Most browsers also display iframe s with a narrow inset border by default,
but you can modify or remove the border with CSS.
Listing 4-20 shows a minimal iframe bearing only a src attribute and some simple fallback content for
those few browsers that can't display inline frames. In this case, the fallback content includes a link to the
framed page so users can still reach that content, even if not in the manner originally intended.
Listing 4-20. A simple iframe with fallback content
<section class="news">
<h2>Latest News</h2>
<iframe src="newsfeed.html">
<p>We're sorry, your browser can't display this content in a frame.
You can still <a href="newsfeed.html">visit the page directly</a>.</p>
</iframe>
</section>
When the contents of an iframe exceed the frame's dimensions, scrollbars will appear allowing visitors to
scroll the page within the frame to bring the overflowing content into view. You can disable those scrollbars
with CSS and the declaration overflow:hidden , but that will obviously prevent your users from seeing
the hidden content. HTML5 has introduced the new seamless attribute, which instructs the browser to
render the iframe as if it were part of the parent page, without a border or scrollbars, but no browsers
support the seamless attribute at the time of this writing.
Figure 4-11 shows an iframe with only the default styling. This image is from Safari for Mac OSX, which
draws the frame at 300 pixels wide and 150 pixels tall by default, though some other browsers may vary
slightly.
Figure 4-11. An iframe with default styling
 
Search WWH ::




Custom Search