Problems with styling buttonRow -- esp in IE

[tstamplis]

Ok, if I had any hair, I'd have pulled it out by now! I'm trying to surround the main page content area with a border using images (I know everybody seems to want to use css for rounded borders, but I actually WANT to use images!).

I can get the cap on as a background to the breadcrumb row, and use the centercolumn for the repeating y borders, and the bottom cap in the tpl_main_page.php just before the end content division. Problem, of course, is on pages with a button row, the repeating y image stops. (Apparently the contentmid ends before the buttonrow). I can't get the stylesheet to effect the buttonrow:
.buttonRow {
background-image:url("../images/xxx.gif");
background-repeat:repeat-y;
}
This has no effect, the image is not displayed, thus, a break at the button row.

Then I tried putting the repeating y border in the content division, which works great except I can't put the bottom image inside the content division if the content division is also repeating the y border image, you get the end cap, then one more line of repeaiting y. Placing the bottom image just AFTER the content division in the tpl_main_page.php puts the image into the left column and puts all left column info below the image.

SOOO, can anyone, PLEASE, tell me how to get the entire mid-section of every page, INCLUDING the buttonRow, to be surrounded by a top image, middle repeating image, and bottom image (with no gaps!).

Any assistance would be greatly appreciated (and my add a year or so to my life!)

[tstamplis]

BTW, an alternate solution was to put a division class just inside the content class and make that class be the repeating y image. This worked fine except I it gives me a gap at the top and bottom. If it's easier to explain, maybe someone could tell me how to create a division class without any gaps between it and the next division.

[tstamplis]

Well, actually I can narrow this down even more! It seems that the extra line of repeating y that comes after the bottom cap when using the content class for the repeating y image and putting the bottom cap in the tpl_main_page.php just BEFORE the end of the content division only happens in IE 7.0, but not Firefox. In Firefox, all is beautiful! So, maybe I just need some slick little snippet to make IE see what Firefox sees? To clarify, I use this in the stylesheet:

#content {
background-image:url("../images/xxx.gif");
background-repeat:repeat-y;
}

Then in the tpl_main_page.php near the centercolumn section I add this just before the end of the content division:

<!--<end contentWrap> -->
<img src="../images/xxx.gif">
</div>
<!-- end content-->

The top image is put in the stylesheet as a background for the breadcrumb division.

This works 100% in firefox, but in iE it puts an extra row of repeating y image after the bottom cap.