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! |
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.
|
All times are GMT -6. The time now is 03:02 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.