I have a Container div that holds my header, maincontent and footer div. The body has a background that repeats on Y, and the Header and Footer div each have a background image that matches up with the background image of the body.
The problem is that in IE and Firefox the horizontal lines in all these background images match up. But in Safari and Opera, it is like the container div is pushed to the right 1px. I can even add a "left: 1px;" to the container div and it will line up in Safari and Opera, but ultimately break IE and Firefox.
Ok, another solution would be to use a transparent PNG for your header image – remove the pattern element from it and allow that space to be transparent – then you won’t be trying to line-up the background image.
Unfortunately, I have tried the transparency option, but PNG8 just doesn’t give the quality that I need in the image especially regarding shadows. I know that PNG24 would, but it isn’t supported enough on past browsers, I will have to wait a few more rounds of browser versions until we can safely feel the unsupported older browsers are out of the picture.
Thanks Nick for pointing the outline out, didn’t realize that. Definitely will add that rule.
I think what I will do is actually put a div at the top of the container that is X pixels high and has the same background in it. I will also extend the footer to the bottom of the website also. This will then take care of this problem and the problem of keeping everything center when resizing the window in some of the browsers which cause it to break.