Mon, 2008-06-30 17:25
Sorry for the vague subject!
I am building some of those infamous rounded corner content boxes.
Remarkably enough, I build the bulletproof box correctly.
However, when I try to insert some info with a background color, the color does not expand to fill the whole box.
Here is the html
<div id="sidebar_boxes"> <div class="sidebar_box"> <h3 title="Facts"> </h3> <div class="sidebar_mid"> <p class="grey1">Human error accounts for 32% of all data loss</p> <p class="grey2 orange">The US Bureau of Labor reports that 93% of companies that suffer a significant data loss are out of business within 5 years</p> <p class="grey1 orange">A survey of IT executives revealed that 40% of companies were unable to recover their data from tape due to media unreliability</p> <p class="grey2 orange">Complete automation, lower risk and immediate data recovery vs. tape backup</p> </div><!--.sidebar_mid--> </div><!--.sidebar_box--> </div><!--#right_boxes-->
CSS:
#sidebar_boxes { vertical-align:top; margin:0; padding:0; margin:0 0 0 20px; } .sidebar_box { margin:10px 20px 0 0; color: #FFF; /* set the text color */ background: url(images/sidebar_box.png) repeat-y top center; /* use center of image, and repeat vertically */ width: 329px; /* same as image width */ } .sidebar_box h3 { margin:0; background: url(images/sidebar_box.png) no-repeat top left; /* use left portion of image for top bar */ padding: 20px 25px 0px 10px; /* move text into real content area */ } .sidebar_mid { padding: 0 25px 40px 10px; /* move text into content area */ background: url(images/sidebar_box.png) no-repeat bottom right; /* use right portion of image for bottom bar */ margin: 0; color:#000; font-family:Arial, Helvetica, sans-serif; } .grey1 { background-color:#e8e8e8; padding:1px 6px 0px 4px; } .grey2 { background-color:#f5f5f5 } .orange { border-top:1px solid #f29509; }
view:
http://www.trulygooddesign.com/abs/rounded.html
thanks!!