Since I am a new user I can't include a link to my page which shows what the problem is, so I will do my best to explain the issue. (Also I can't include a screen cap image).

I have a content wrapper/border with a single pixel border all around. I want the top to have rounder corners which would contain a gradient background upon which the actual content would reside. So to do this I created an image (with a gradient) which would span the entire wrapper/border horizontally. I got it to work except there is an 18-pixel gap/white space under the image, which makes it appear that the "content-border" is disconnected from the rounded corner image. Plus, the image itself is squeezed in height. And I can't get the content to sit on top of the image even though I adjusted the z-index. Here's the CSS and code:

#content-border {
width: 683px;
float: right;
border: 1px solid #8cc3de;
margin: 10px 1px 0 0;
padding: 0 0 0 0;
}

#content-border-roundedCornersImg {
position: relative;
z-index: 1;
left: -1px;
top: -1px;
}

#content {
margin: 0px;
z-index: 5;
float: left;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 20px;
}

<div id="content-border"><img src="images/contentBgRoundedTop.jpg" width="685" height="87" id="content-border-roundedCornersImg" /><div id="content"><br />
<h1>[Heading]</h1>

Any ideas or suggestions? Thanks much.