Book HomeCascading Style Sheets: The Definitive GuideSearch this book Monday 24th of November 2014 04:46:00 PM

On the other hand, it might be okay to go beyond the bottom and right edges, but not the top or left. Figure 9-13 shows the results of these styles (and remember, the dashed lines are only for illustrative purposes):

DIV#sidebar {position: absolute; top: 0; left: 0; width: 5em; height: 7em;
overflow: hidden; overflow-clip: rect(0, 6em, 9em, 0);}
Figure 9-13

Figure 9-13. Expanding the clipping region

This extends the area in which content can be seen. However, it


0.3. How to Contact Us

We have tested and verified the information in this book to the best of our ability, but you may find that features have changed (or even that we have made mistakes!). Please let us know about any errors you find, as well as your suggestions for future editions, by writing to:

O'Reilly & Associates, Inc.

1005 Gravenstein Highway North

Sebastopol, CA 95472

(800) 998-9938 (in the U.S. or Canada)

(707) 829-0515 (international/local)

(707) 829-0104 (fax)

You can also send us messages electronically. To be put on the mailing list or request a catalog, send email to:

To ask technical questions or comment on the book, send email to:

We have a web site for the book, where we'll list examples, errata, and any plans for future editions. You can access this page at:

http://www.oreilly.com/catalog/css/

For more information about this book and others, see the O'Reilly web site:

http://www.oreilly.com/



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

paragraph, is a small piece of paper with the content of the elementwritten on it. Around each piece of paper is some amount of clearplastic; this plastic represents the margins. The first piece ofpaper (say an H1 piece) is laid down on the canvas(browser window). The second (a paragraph) is laid below it and thenslid up until the edge of one of the piece's plastic touchesthe edge of the other's content. If the first piece of paperhas half an inch of plastic along its bottom edge, and the second hasa third of an inch along its top, then when they slide together, thefirst piece's plastic will touch the top edge of the second
<BODY BACKGROUND="bg23.gif">

This will cause a user agent to load the filebg23.gif and then "tile" it in thedocument background, repeating it in both the horizontal and verticaldirections to fill up the entire background of the document, as shownin Figure 6-22.

Figure 6-22

Figure 6-22. Applying a background image in HTML

This effect can be duplicated in CSS, but CSS contains a great dealmore than simple tiling of background images. We'll start with talking about the width of a border only makes sense in the contextof borders that have some existence.

This is important to bear in mind because a common mistake is toforget to declare a border style. This leads to all kinds of authorfrustration because at first glance, the styles appear correct. Theresult, though, is a paragraph with no border:

P {margin: 5px; border-width: 20px;}

Since the default value of border-style is remain are the details of what happens when absolute positioning is invoked.

When an element is positioned absolutely, it is completely removed from the document flow. It is then positioned with respect to its containing block, and its edges are placed using the side-offset properties. The positioned element does not flow around the content of other elements, nor does their content flow around the positioned element. This implies that an absolutely positioned element may overlap other elements, or be overlapped by them. (We'll see