Rounded BOX - Simple Problem - Please help!

Hi All,

I have a bit of an annoying problem with rounded boxes, the more I try and fix it, the more my css gets complex so thought I would ask now.

I what I want is expandable rounded edged boxes, only need to expand vertically show it should be an easy one.

What I have at the moment is:-

HTML
<div id="box_halfbox_left" class="background_halfbox">
<div class="boxtop_halfbox">
<div class="box-container_halfbox">
<div class="box-content_halfbox"> <p>content</p>
</div>
<p class="boxbottom_halfbox"></p>
</div>
</div>
</div>
<div id="box_halfbox_right" class="background_halfbox">
<div class="boxtop_halfbox">
<div class="box-container_halfbox">
<div class="box-content_halfbox">
<p>content</p>
</div>
<p class="boxbottom_halfbox"></p>
</div>
</div>
</div>

CSS
/* Half a box, no menu */
#box_halfbox_left {
width:410px;
margin: 30px 45px 0 1px;
float: left;
}
#box_halfbox_right {
width:410px;
float: left;
margin-top: 20px;
}
.background_halfbox {
background: url(../images/curve_middle_halfbox.gif) repeat-y center center;
}
.boxtop_halfbox {
background: url(../images/curve_top_halfbox.gif) no-repeat top center;
width:100%;
padding-top: 1px !important;
}
.boxbottom_halfbox {
background: url(../images/curve_bottom_halfbox.gif) no-repeat bottom center;
padding-bottom: 20px;
}
.box-container_halfbox{
padding-top: 10px;
font-size: 12px;
line-height: 18px;
}
.box-container_halfbox a {
color: #ce2828;
font-weight: bold;
}
.box-content_halfbox {
padding-left: 21px;
padding-right: 21px;
padding-top: 1px;
}

An example of this can be seen here:-
http://www.monthlyweb.co.uk/projects/projectword/contact_us.php

I tried using firebug and everything to debug but no luck.

The main problems are:-

1. There was once a background image instead of my top image which therefore didnt show rounded corners - I think I fixed this
2. There is a background image instead of my bottom image so it doesnt show rounded corners.
3. There is some wierd padding somewhere, I cannot get the title of each box any closer to the top of its box than it is already.


Really appreciate anyones time on this! THanks

 

You'll want to read this: http://battletech.hopto.org/html_tutorials/eightcorners/template.html

I also have a few examples of rounded corners available here: http://www.dan-schulz.com/for-others/feliciaf/tell-tails/template.html (the directory is open, so feel free to play with the code and images).