repeating background and negative margins

Wondering if anyone can help me out. How can I line the content area with the top part of the box below. IE i dont want a 15px space at the top before the content.

I've tried the following which works, only problem is that the tiled content background is now displaying over my top background.

I've uploaded an example page here so that you can clearly understand what i'm getting at.

Any help would be appreciated, thanks.

.box {
    width:2开发者_如何学Go18px;
}
.box .top {
    width:100%; height:15px;
    background:url(sidebarTop.png) no-repeat;
}
.box .content {
    margin:-8px 0 0 0;  
    padding:0 10px;
    width:198px; 
    background:url(sidebarTile.png) repeat-y 0 8px;
    color:#FFF;
}
.box .bottom {
    width:100%; height:15px;
    background:url(sidebarBottom.png) no-repeat;
}

<div class="box">

    <div class="top"></div>
    <div class="content">
        Content goes here.
    </div>
    <div class="bottom"></div>

</div>

---

Now that IE9 supports rounded corners, why not just use CSS3's border-radius property on a single div? You can even apply a drop shadow.

.box {
    padding:10px;
    border-radius:10px;
    -moz-border-radius:10px;
    box-shadow:0px 2px 3px #BBB;
    -moz-box-shadow:0px 2px 3px #BBB;
    -webkit-box-shadow:0px 2px 3px #BBB;
    background-color:brown;
    color:white;
    width:200px;
}

http://jsfiddle.net/AlienWebguy/YYhgk/

---

It's not ideal but you could try absolute positioning.

http://jsfiddle.net/imoda/XZWTt/

.box {
    width:218px;
}
.box .top {
    width:100%;
    height:15px;
    background:url(http://demo.bigg.co.za/_help/sidebarTop.png) no-repeat;
}
.box .content {
    margin:0 0 0 0;  
    padding:0 10px;
    width:198px; 
    background:url(http://demo.bigg.co.za/_help/sidebarTile.png) repeat-y 0 8px;
    color:#FFF;
    position: relative;
}
.content > p {
    position: absolute;
    top: -10px;
}

.box .bottom {
    width:100%;
    height:15px;
    background:url(http://demo.bigg.co.za/_help/sidebarBottom.png) no-repeat;
}

---

You don't need the negative margin on the content div, just give the containing div position: relative and give it a top position to place it where you want - for example: http://jsfiddle.net/H8TE2/

---

This isn't really the answer to my problem but I have gone with kinakuta's suggestion of using external scripts to get the results I want in browsers that suck with css3