There's only one background that will be used, all other class settings will be overridden by the latest one being set.
Solution: create three containers instead of one, set each with it's own class.
Try using javascript for that purpose, let's say jQuery corner plugin, it will work in most browsers, even in IE :)
Does it work if you position the images?
.widgetMainLeft
{
background: url('/Content/Images/Title_Bar_Left.png') 0 0 no-repeat; /* 0px/0% in X dimension, 0px/0% in Y dimension */
width:6px;
min-height:100%;
}
.widgetMain
{
background: url('/Content/Images/Title_Bar_Middle.png') repeat-x;
text-align:left;
margin-top:auto;
min-height:100%;
}
.widgetMainRight
{
background: url('/Content/Images/Title_Bar_Right.png') top right no-repeat;
width:6px;
min-height:100%;
}
Okay, I made it work with the following:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<style>
#container {
margin: 1em auto;
height: auto;
width: 18.5em;
font-weight: bold;
}
div.widgetBody {
background-color: #0f0;
}
div.widgetMainLeft
{
background: transparent url(img/top-left-c.png) 0 0 no-repeat;
}
div.widgetMain {
background: transparent url(img/bottom-left-c.png) bottom left no-repeat;
}
div.widgetTitle {
background: transparent url(img/top-right-c.png) 100% 0 no-repeat;
padding: 0.5em 1em 0 1em;
border-bottom: 1px solid #000;
}
div.widgetDisplayedArea
{
background: transparent url(img/bottom-right-c.png) 100% 100% no-repeat;
}
ol.display {
display: block;
margin: 0 auto;
list-style-type: none;
}
ol.display li {
float: left;
width: 8em;
margin: 0.5em; background-color: rgba(220,220,220,0.5);
}
ol.display li:hover
{
background-color: rgba(250,250,100,0.9);
}
ol.display li img
{
display: inline;
vertical-align: middle;
margin: 0 0.4em;
}
p {
clear: both;
padding: 0 1em 0.5em 1em;
border-top: 1px solid #000;
font-size: 80%;
text-align: right;
}
</style>
</head>
<body>
<div id="container">
<div class="widgetBody">
<div class="widgetMainLeft" />
<div class="widgetMain">
<div class="widgetTitle">Messages</div>
<div class="widgetDisplayedArea">
<ol class="display">
<li><img src="img/inbox.png" alt="inbox" />inbox</li>
<li><img src="img/drafts.png" alt="drafts" />drafts</li>
<li><img src="img/outbox.png" alt="outbox" />outbox</li>
<li><img src="img/pending.png" alt="pending" />pending</li>
</ol>
<p><a href="#more" title="more...">more</a></p>
</div>
</div>
<div class="widgetMainRight" />
</div>
</div>
</body>
</html>
There's a demo over at: http://davidrhysthomas.co.uk/so/widgetcorners.html
As noted, it seems to be that you hadn't ordered your images properly, the background should go on the outermost div, the top image should go on the inner-most, and the others ordered as appropriate.
This may not be the best way to approach layout, but I believe the actual problem that you're having is that the repeating background image for widgetMain is covering the widgetMainLeft and widgetMainRight background images. Simply layer them using some version of the following layout and make sure that widgetMain is a parent of the other two.
<div class="widgetBody">
<div class="widgetMain">
<div class="widgetMainLeft">
<div class="widgetMainRight">
<div class="widgetTitle">
Messages</div>
<div class="widgetDisplayedArea">
<table>
...
</table>
</div>
</div>
</div>
</div>
</div>
I´m not sure you can do it like this in ccs only. It seems to me that your left and right divs will have 0 height as setting the min-height to 100% will definitely not work in all browsers.
It is one of the most common problems of css design, equal height columns...
What you could do is use only 2 images, a very wide one for the contents, including the right border (just give it a right padding) and a small one for the left border that you need to apply to the parent element (widgetBody), not a separate widgetMainLeft div. With the appropriate padding you should be able to get the effect in css only.
From what I can tell, there are a few problems with the current approach:
min-height doesn't work with IE6 (PNGs might be problematic too)
Your image heights are fixed, but you can't necessarily control the height of the widget, especially if the user resizes the text. And when that happens, your bottom rounded corners won't line up with the main body.
Assuming your widget is fixed width, I would suggest this:
<div class="widgetBody">
<div class="widgetMainTop />
<div class="widgetMain">
<div class="widgetTitle">Messages</div>
<div class="widgetDisplayedArea">
<table>
...
</table>
</div>
</div>
<div class="widgetMainBottom" />
</div>
and your CSS would be something like:
.widgetMainTop {
background: url('/Content/Images/Title_Bar_Top.png') center bottom no-repeat;
width: (width of widget);
height: (height of image);
}
.widgetMain {
background: #ffffff;
text-align:left;
margin-top:auto;
}
.widgetMainBottom {
background: url('/Content/Images/Title_Bar_Bottom.png') center top no-repeat;
width: (width of widget);
height: (height of image);
}