CSS Box only one piece graphic.
final update (Jan 23, 2006): The revised, one-image technique is finally complete!
Simple Box by teddNote: this is a box with rounded corners. I have reviewed the available references and found similar solutions, but none that do it this way.? This box was created by using eight very small gifs. One for each corner, and one for each side (total combined size of only 7.2 KB).? This box automatically resizes height depending upon content. The width can be tied to the size of the viewport or set to a fixed size by changing the width value.? This box can be made any size without any problems with graphics. In other words, you don't have to create a large graphic for this box to accommodate extra large sizes.? This box is not affected by changes in text-zoom and holds its shape throughout all magnifications.? The only known browsers that have problems with this technique are: Netscape 4.78 for Windows 2000, Netscape 4.8 for Linux, and Internet Explorer 4.0 for Window's 98.? This box technique Validates under "HTML 4.01 Strict" and "W3C CSS".? The technique looks fine (i.e., readable) without CSS.
For success, make sure your background images are large enough to grow however big you need them. The ones used in this demo are 600px tall for the lower div, for example. Also note, any top margin on the top element (the upper <p> in this case) inside the lower div (.boxbody) will leak out in IE5/Win (and probably others) and seperate the two divs, breaking the box. To prevent this just remove that margin through adding a class to the element (or any other preferred method), and replace the margins with a top padding on the lower div (.boxbody). IE5/Win also has a glitch in the upper left corner that can be fixed by applying a dimension to the h2 element. In this demo it's done using the "Holly Hack", feeding a {height: 1%;} only to IE/win browsers. (see the code)
Known Issues Issue #1: At certain font-scaling sizes in Gecko browsers, there is a 1px jog at the bottom-left. YMMV. This can be avoided by setting the font-size on the body to 100%, and sizing your text elsewhere... Issue #2: The CSS won't validate because of the text-shadow used for Safari with transparency color. So much for "progressive enhancement". Issue #3: The KHTML engine in Safari pre-Panther does not render this technique correctly. The backgrounds flow out of their containing boxes. Yet another reason to upgrade. ;) But considering there's now a cookie hijacking exploit with the browser, maybe they'll release an upgrade across the board.