css borders ie compatibility - repeat not working - JavaScript and CSS

I am trying to do borders around text/image/web page articles, and my CSS
is creating problems in IE6. I have not tried it with 7 or 8, so I don't know if
it has problems in those browsers, but I would like a cross-browser compatible
code.

The idea is that I have an image made up of an upper left, upper right, lower left,
and lower right corner. It is also made up of a repeating left, right, upper, and
bottom side. The problem is that the repeating sides are not displaying in IE.
Also, there is a header (banner) image in the center. The other problem is that in
IE the margins aren't being created and the banner is overlapping the sides.
Any help on getting this compatible would help. This is a modification of someone
else's code, it was a joomla template, and I'm making my own joomla template
based on it. I am not a great css coder, so I need help with this.
(Joomla is a content-management web site creating package for those who
don't know - but this specific code should be joomla-independent and should
not depend on how joomla does things)


<div class="Post2" >
    <div class="Post-tl2"></div>
    <div class="Post-tr2"><div></div></div>
    <div class="Post-bl2"><div></div></div>
    <div class="Post-br2"><div></div></div>
    <div class="Post-tc2"><div></div></div>
    <div class="Post-bc2"><div></div></div>
    <div class="Post-cl2"><div></div></div>
    <div class="Post-cr2"><div></div></div>
    <div class="Post-ccgold"></div>
    <div class="Post-body2">

<div class="contentLayout" >

<div class="content">

<div class="Header">
    <div class="Header-gif"></div>
</div>

</div>

</div>
</div>
</div>

tl, tr, tc, bl, bc, etc.. stand for top left top right top center bottom left
bottom center, etc...



.Post2
{

  text-indent: 20px;
  overflow: hidden;
  min-width: 370px;
  min-height:27px;
  margin: 0 auto;
  position: relative;
  z-index: 0;
}


.Post-body2
{
  position: relative;
  z-index: 0;
  margin: 50px;
}

.Post-tl2
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  left: 0;
  width: 44px;
  height: 42px;
  background-image: url('../images/design-tl.bmp');
}

.Post-tr2
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  top: 0;
  right: 0px;
  width: 44px;
  height: 42px;
}

.Post-tr2 div
{
  position: absolute;
  z-index: -1;
  top: 0px;
  left: 0px;
  width: 44px;
  height: 42px;
  background-image: url('../images/design-tr.bmp');
}

.Post-bl2
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 44px;
  height: 42px;
}

.Post-bl2 div
{
  position: absolute;
  z-index: -1;
  top: 0px;
  left: 0px;
  width: 44px;
  height: 42px;
  background-image: url('../images/design-bl.bmp');
}

.Post-br2
{
  position: absolute;
  overflow: hidden;
  z-index: -1;
  bottom: 0;
  right: 0;
  width: 44px;
  height: 42px;
}

.Post-br2 div
{
  position: absolute;
  z-index: -1;
  top: 0px;
  left: 0px;
  width: 44px;
  height: 42px;
  background-image: url('../images/design-br.bmp');
}

.Post-tc2
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  top: 0;
  left: 44px;
  right: 44px;
  height: 42px;
}

.Post-tc2 div
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 42px;
  background: url('../images/design-top.bmp') repeat-x;
}

.Post-bc2
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  bottom: 0;
  left: 44px;
  right: 44px;
  height: 42px;
}

.Post-bc2 div
{
  position: absolute;
  z-index: -1;
  top: 0px;
  left: 0;
  width: 100%;
  height: 42px;
  background: url('../images/design-bottom.bmp') repeat-x;
}

.Post-cl2
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  top: 42px;
  left: 1;
  width: 44px;
  bottom: 42px;
}

.Post-cl2 div
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 1;
  width: 44px;
  height: 100%;
  background: url('../images/design-left.bmp') repeat-y;
}

.Post-cr2
{
  position: absolute;
  overflow:hidden;
  z-index: -1;
  top: 42px;
  right: 0;
  width: 44px;
  bottom: 42px;
}

.Post-cr2 div
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0px;
  width: 44px;
  height: 100%;
  background: url('../images/design-right.bmp') repeat-y;
}

.Post-cc2
{
  position: absolute;
  overflow:hidden;
  z-index: -2;
  top: 42px;
  left: 44px;
  right: 44px;
  bottom: 42px;
  background-color:#ffff90;
}

.Post-ccgold
{
  position: absolute;
  overflow:hidden;
  z-index: -2;
  top: 42px;
  left: 44px;
  right: 44px;
  bottom: 42px;
  background-color:#fecb01;
}

.Post2
{
  margin: 50px;
}

.contentLayout
{
  width: auto;
  margin-bottom: 8px;
  position: relative;
}


.contentLayout .content
{
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}

div.Header
{
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
  z-index:0;
  width: 1000px;
  height: 188px;
}

div.Header-gif
{
  position: absolute;
  z-index:-2;
  top: 0;
  left: 0;
  width: 1000px;
  height: 188px;
  background-image: url('../images/Header.gif');
  
  background-position: left top;
}