Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
Hi,
I'm building a centered website. The body has a background to give the website a shadowed border. There is a problem when using different resolutions: sometimes I have a 1px-spacing on the rightside of my banner.
I can't figure out, how i can fix this so it looks the same in all screen resolutions.
Oh btw, the problem only occurs in Internet explorer. (tested in FF an IE)
Link: regtopint.nl -
- CommentAuthorljromanoff
- CommentTimeFeb 26th 2006
There is no perfect solution. However, you should be able to stabilize the behavior of your background image by making it bigger. Stretch it out to 4000 pixels wide or so. That will make browsers less likely to place it in the wrong location when doing the calculation for centering the background. -
thnx... I'll give it a try
Are there any other techniques witch people use?
I always use the "footer stick alt" in combination with a body-background. -
I have had this problem before, and it is something to do with the width of the background being even and the layout width being odd... or vice versa. They both need to be even or both odd widths... It sounds really strange, but I'm pretty certain that was the solution.
For example, If your background is 761px wide and your layout is 750px wide, you need to either make the background 760px, so that both are an even width, or make the layout 751px wide, so that both widths are odd.
Try it anyways, let me know if it works... -
I checked if the banner and it had an even width.
I made an example, where I made a container div of 790px width and in this container I put a div website (770px).
The background wich I normally give to body, I now gave to the container div.
Problem solved...
I know it's a bit dirty... but it works... -
You don't need a separate div for the background. Just make sure the width of background image is even (if the website width is even) when you chop it up and save it and place the image on the background of the body.
body { background: url(img/bg.jpg) repeat-y 50% 0; } -
I recently ran into this problem as well, and fixed it for myself, so I thought I'd share what I did. First off, I don't think the odd/even thing matters, as is expressed here: http://www.positioniseverything.net/bg-centering.html. It appears it's something that IE and FF just don't agree on.
So what I did was use an IE hack (probably frowned upon) to emulate the 1px difference in IE. It looks something like:
#page {
width: 800px;
margin: 0 auto;
_padding-left: 1px;
}
I realize this won't work for everyone, but it might help get you on the right track.
1 to 7 of 7