DIV 9 cell box round corner problem

[woody993]

I need to create a box with rounded corners and a drop shadow using DIVs. This is what I have so far:

<div style="position:absolute; top:200px; left:300px; width:200px;">
<div style="background-image:url(includes/window/side_t.png); background-repeat:repeat-x; margin-top:0; margin-bottom:0; height:20px;">
<div style="background-image:url(includes/window/corner_tl.png); background-repeat:no-repeat; float:left; width:20px; height:20px; margin-left:-20px;"></div>
<div style="background-image:url(includes/window/corner_tr.png); background-repeat:no-repeat; float:right; width:20px; height:20px; margin-right:-20px;"></div>
<div style="padding-top:8px; font-family:Arial, Helvetica, sans-serif; font-size:14px;">Window of Opportunity</div>
</div>
<div style="background-color:#ffffff;">
<div style="background-image:url(includes/window/side_l.png); background-repeat:repeat-y; float:left; width:20px; margin-left:-20px;">&nbsp;</div>
<div style="background-image:url(includes/window/side_r.png); background-repeat:repeat-y; float:right; width:20px; margin-right:-20px;">&nbsp;</div>
<div style="font-family:Arial, Helvetica, sans-serif;">Content</div>
</div>
<div style="background-image:url(includes/window/side_b.png); background-repeat:repeat-x; margin-top:0; height:20px;">
<div style="background-image:url(includes/window/corner_bl.png); background-repeat:no-repeat; float:left; width:20px; height:20px; margin-left:-20px;"></div>
<div style="background-image:url(includes/window/corner_br.png); background-repeat:no-repeat; float:right; width:20px; height:20px; margin-right:-20px;"></div>
</div>
</div>

It will eventually be cleaner than what it currently is. The images are as follow:
corner_tl = top left corner - rounded and slight shadow
corner_tr = top right corner - rounded and slight shadow
corner_bl = bottom left corner - rounded, gradient and major shadow
corner_br = bottom right corner - rounded, gradient and major shadow
side_l = left side - slight shadow
side_r = right side - slight shadow
side_b = bottom side - slight shadow and gradient
side_r = top side - slight shadow

The left and right sides are not looking correct.
Help in fixing this is greatly appreciated

[edited by: woody993 at 4:06 am (utc) on Aug. 24, 2008]

[edited by: engine at 11:35 am (utc) on Aug. 24, 2008]
[edit reason] No urls, thanks [/edit]

[woody993]

Code tags didn't seem to hold so just trying again.

<div style="position:absolute; top:200px; left:300px; width:200px;">
<div style="background-image:url(includes/window/side_t.png); background-repeat:repeat-x; margin-top:0; margin-bottom:0; height:20px;">
<div style="background-image:url(includes/window/corner_tl.png); background-repeat:no-repeat; float:left; width:20px; height:20px; margin-left:-20px;"></div>
<div style="background-image:url(includes/window/corner_tr.png); background-repeat:no-repeat; float:right; width:20px; height:20px; margin-right:-20px;"></div>
<div style="padding-top:8px; font-family:Arial, Helvetica, sans-serif; font-size:14px;">Window of Opportunity</div>
</div>
<div style="background-color:#ffffff;">
<div style="background-image:url(includes/window/side_l.png); background-repeat:repeat-y; float:left; width:20px; margin-left:-20px;">&nbsp;</div>
<div style="background-image:url(includes/window/side_r.png); background-repeat:repeat-y; float:right; width:20px; margin-right:-20px;">&nbsp;</div>
<div style="font-family:Arial, Helvetica, sans-serif;">Content, with more and more content until this DIV grows</div>
</div>
<div style="background-image:url(includes/window/side_b.png); background-repeat:repeat-x; margin-top:0; height:20px;">
<div style="background-image:url(includes/window/corner_bl.png); background-repeat:no-repeat; float:left; width:20px; height:20px; margin-left:-20px;"></div>
<div style="background-image:url(includes/window/corner_br.png); background-repeat:no-repeat; float:right; width:20px; height:20px; margin-right:-20px;"></div>
</div>
</div>

[mipr]

If your box has a fixed width of 200px, the way I usually do it is to have a vertically-repeating background image on the main div, containing a 10px 'slice' of both the left and right sides.

Then the first element inside the box (usually a h2 or h3 for me) has a background image positioned at the top, with both top-left and top-right corners. Then I put the two bottom corners in a single background image in the last element inside the container div. something like:

<div style="background:url('sides.png') repeat-y">
 <h2 style="background:url('top-corners.png') top no-repeat; padding:3px">Box Header</h2>
<p>Lorem ipsum dolor sit amet...</p>
<p style="background:url('bottom-corners.png') bottom no-repeat">consectetur adipisicing elit...</p>
</div>

The condensed background css might be wrong but hopefully you get the idea.