-
1. Re: I'm experiencing 2 issues with a site I'm working on that I can't figure out...
SnakEyez02 Dec 2, 2011 10:18 AM (in response to spdorsey6969)1) My pages have a footer that attached to the bottom of the content of the page. On pages that end with tables, there's space between the content and the footer. On pages without tables, it looks fine. Examples:
Broken:
[1] http://www.dorseygraphics.com/review/wclg/site_05/winelist.html
Not broken:
[2] http://www.dorseygraphics.com/review/wclg/site_05/contact.html
The problem here is the background image. Do you have the image without the beige background in the center? If so what you need to do is leave the background of the body as the URL to the image (without the beige in the center), no-repeat, and leave the color as you have. Then move the lighter beige color background to the container with the navigation and content.
2) My background image contains some complex elements that overlap (like vines overlapping the content area just a bit on either side). the client LOVES this, so it's not an option to remove. My background is currently a large PNG that easily takes care of the overlapping issue with a simple BG image. But it runs out at the bottom of the page, and some of the pages have content that it too tall for the background.
Example:
[3] http://www.dorseygraphics.com/review/wclg/site_05/reviews.html
How would you go about solving this problem? I'm thinking the easiest way is to add a new containing DIV and use it to extend the content area down, but that would mess up the header (I think). I'm confused.
If you look at my above answer I don't think this is a huge problem. In CSS3 (Safari, Firefox, Chrome, IE9) you can have multiple background images, one static and one repeating in your case. However, older browsers will not see this, most notably IE 8 and earlier. You could put the initial image in one layer and make the body background a repeating image but you run the risk of the layers not aligning.
Another alternative is to set the max-height of the content container and then set the overflow attribute to scroll in the CSS (overflow: scroll;). That would make the content container scroll independantly from the page.
A final alternative would be to discuss the pages with the client again. For instance with the wine list there are different types of wines. You could have nested tabbed panels, or you could make a page for each wine type sparkling/white, red, etc. and then have tabbed panels underneath to make the lists shorter. Otherwise the "Significant Others" or "Riesling" get lost at the bottom of the page, regardless of your background, and users do not know those wines are offered.


