Forum Moderators: open
The main page on her site is setup to have 2 frames (header and body I guess) with a background image that carries over from the top frame to the bottom frame. I used photoshop to cut the image into 2 sections and actually managed to get it all to line up real nice. The top frame never changes (it just contains her business logo) and the bottom frame is where all the content shows up. Everything is fine until a page is loaded in the bottom frame that requires a scrollbar. When the scrollbar shows up, it moves the background image on the bottom frame over to the left and out of alignment with the background image on the top frame. Is there anyway to stop this from happening?
I must say, you explained the situation very clearly - well done. There is a "theoretical" fix that keeps the background image from scrolling - but unfortunately Explorer does not support it at this time. The solution is to use CSS and create a background-attachment:fixed; rule for the body element.
However, you may also find that different browsers do not align the two pieces of your background image in the same way - that is a common experience. Different browsers may apply different amounts of "extra" space around each frame by default.
Frames pose many challenges that are not always immediately obvious - such as search engines sending traffic directly to the content page without the complete frameset. That denies your visitors navigation to the rest of the website.
You will probably find better results by eventually redesigning the website so that it doesn't use frames. In my experience, the fact that the navigation scrolls off-screen in a non-framed website does NOT create a problem for many users.
But having visitors from search engines discover a content page that is orphaned from any navigation can be a very frustrating loss of potential business.
There ae still some rare situations where I use a frameset for PART of a website. But I have measured results very closely for nearly ten years over hundreds of different websites and found that using a frameset for the entire website has never been a better design than using "flat" un-framed pages.
<style type="text/css">
BODY {
background: white url('graphics/mainimage2.jpg') no-repeat top center;
background-attachment: fixed;
}
</style>
The top frame never has a scroll bar so there is no problem with that frame. The bottom frame lines up perfectly with the top frame as long as the bottom frame doesn't contain text that requires scrolling. If there is an ample amount of text on the bottom frame, the scrollbar appears and the fixed background on the bottom frame gets moved over to the left to make room for the scrollbar I guess. When this happens the backgrounds no longer lineup.
If you can rethink the design so that the background images are postioned in a default manner - begining at (0,0) - I think that would clear up the odd behavior. Of course, I realize that your graphic may not permit this.
It's a tough one. Trying to get ANY image seams to match up over two frames is a major mind melt, and wih background images, you've got quite a challenge. What works in IE on Windows may well break elsewhere.
If the edges of your background are a plain color, maybe you could just use that color for the body background, and then put the content in a div that uses the "real" background image as its background - but experiment with a width of, say, 98%. The body background color could fill in the small gaps at the edges of the content div.
It's going to take experimenting to avoid this IE behavior and find a part of their rendering engine that behaves as you hope.
What DTD are you using? You may get better results if you make sure the browser is in standards mode instead of quirks mode.
With simple images/pages and modern hardware, there is not usually much of a problem but complex pages on old hardware - that is a different story.
Kaled.
