Div Container Cleanup? - css

Question

Just wondering if its possible to cleanup (less code needed to do the same thing) making this div container. Basically it's just a div with a background image however the top & bottom of the div have rounded graphical corners which is why I have a top, middle, and bottom div inside the container div.
<div class="fbox">
<div class="ftop"></div>
<div class="fmid">
Fullbox Text Goes Here
</div>
<div class="fbot"></div>
</div>
Css:
.fbox {
width: 934px;
margin: 0 auto;
opacity: 0.70;
}
.ftop {
width: 934px;
background:url(../images/cb/full.png) no-repeat 0 -34px;
height: 17px;
margin:0
}
.fmid {
width: 894px;
padding-left: 20px;
padding-right: 20px;
background:url(../images/cb/fullmid.png) repeat-y;
min-height: 50px;
margin:0
}
.fbot {
width: 934px;
background:url(../images/cb/full.png) no-repeat 0 -17px;
height: 17px;
margin:0
}
Outcome:
http://img709.imageshack.us/img709/6681/fbox.jpg

Answer 1

http://www.the-art-of-web.com/css/border-radius/
You can use CSS Border Radius with a single div instead of creating the top and bottom. IE won't recognize this but there are some handy work arounds for that as well.
I will commonly use CSS3 PIE which is an htc behavior for IE. It does a bunch of other stuff like linear gradient background colors etc. All you do is supply the border radius css for each browser and the browser will know which one to use.
http://css3pie.com/
.yourbox {
/* PIE Sample */
border: 1px solid #696;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
behavior: url(/PIE.htc);
}
All you really need is the border radius stuff for other browsers though.

Answer 2

You could use the border-radius CSS property. In Firefox, you would use -moz-border-radius and in WebKit you would use -webkit-border-radius. I generally will use all three. This will round the corners of the box without need for all the extra div's.
Of course, users of IE are S.O.L. but sometimes you have to give a little to take a little, right? :)
<div id="box">Blah blah blah.</div>
#box{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px}

Answer 3

The easiest way would be to use border-radius, but it's not compatible across all browsers. Support is decent. Also, covering all supported browsers requires vendor specific code, which is kind of annoying:
-webkit-border-radius: 4px; /* Vendor code */
-moz-border-radius: 4px; /* Vendor code */
border-radius: 4px; /* CSS 3 Standard */
You can add borders to divs with border-radius applied, and it'll follow the round of the corners as you'd hope.

Answer 4

If you have to use images which is what it sounds like. Create a single image file that has the borders you want and use special css selectors to adjust the background position so your not loading 3 different background images.
.fbox .border {
background: url(bg.png);
}
.border.mid {
background-position: center center;
background-repeat: repeat-y
}
.border.top {
background-position: top left;
background-repeat: no-repeat
}
and so on and so forth
I can't say exactly how you would adjust the bg position because it will depend on the image you use and whether or not your using a constant fixed width. But I highly recommend using only one image and then using an additional selector to just move the bg position.