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!

Alternatively, can I add something to the styling of the table row to make it display correctly?

Is there a firebug equivalent for Safari and/or IE?

And yes, I tried styling the "container" div instead, with a single image, but that a) includes the footer area and b) created its own problem - the image was cut off at the bottom just below where the page text in the center column ends. If however, that is the better solution, and I can work out any issues with that, like putting a different image in the "container" on each page, I'll do it. Not knowing what issues will come up with that (Can the height of the "container" be specified, can I specify a different background image for each page?), I thought I'd try to continue on the current track, but if you have a better suggestion, I'm willing to try it!

Well, I ended up styling the "container" div instead with the full image. It's not exactly as I want it, but it will do for now. And it works in Firefox, Safari and IE.