Styling the sidebar/center column area with different backgrounds on each page

I am trying to put different background images on each page. Basically, it's the "container" area, encompassing the header, page menu, and sidebars/center column, but NOT the footer area.

So, I broke the background images into 3 parts - header, page menu, and sidebar/center area.

After much playing with the styling, I got it to work! In Firefox. See http://youcangrowthat.com.s52126.gridserver.com/

Then I looked at Safari and IE. Oops. Header and Page Menu look the same as Firefox, but not the sidebar/center area.

Now, the styling for the header and page menus is styling a div, and the styling for the sidebar/center column is styling a table row, and I suspect that is the difference.

/* -------------------------------------------------------*/
/* background image for page menus for garden centers */
/* -------------------------------------------------------*/
body.page-id-14 div#page-menu-div {
width: 990px;
height: 24px;
background:
url('http://youcangrowthat.com.s52126.gridserver.com/wp-content/uploads/bg_garden_centermenu.jpg')
top center no-repeat;
}
/*----------------*/
/* garden centers */
/*----------------*/

body.page-id-14 tr#bodyrow {
width: 990px;
height: 1086px;
background:
url('http://youcangrowthat.com.s52126.gridserver.com/wp-content/uploads/bg_garden_centerbottom.jpg')
top center no-repeat;
}

If the problem is the difference between styling a div and styling a table element, is there somewhere in the styling I can put a div that will hold both the sidebars and the center column?


Thanks!