Rounded Box for CSS Compliant Browsers
Method 1: Float, Fill Remaining Space & Relative Positioning
<div class="ul"></div><div class="ur"></div>
In this demo, the DIVs .ul and .ll are 15x15 left-floating blocks and the
remaining spaces at the top and bottom are taken up by the .ur and .lr DIVs
(also 15px-tall). This reserves our top and bottom padding area and gives
us four targets for the four corner background images. The only thing left
to do was minorly adjust the positions of the corners so they moved into the
left and right padding areas of the main div and covered up its borders in
the corners. This was done via simple relative positioning.
- No extra IMG's or content is needed to provide the corner pieces
- Works well in IE/win (how far back I don't know)
- 4 empty DIVs are required in the markup of each rounded box (ideally we
could get this to 0)
- Rounded box can't have top/bottom padding, though you may be able to add
this by making the DIVs taller than their background images
- Opera 7 requires a block element before the bottom set of DIVs in the
Success: Mozilla, IE6, Opera7 (see above)
<div class="ll"></div><div class="lr"></div>
Here the last contents is in a block before the bottom DIVs (Opera7 friendly).
Here the container only has inline content (Opera7 fails).