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
-
- CommentAuthorwarpdesign
- CommentTimeJun 13th 2007
Hi,
Has anyone else experienced this bug with resizing browser windows where the background and foreground shift back and forth? I have a background on the page that is repeated on the y axis and set to center on the x axis. Then I have a wrapper div for the whole page that is set to margin: auto on the left and right. On certain browsers when I resize the window the background image and foreground div shift back and forth by 1 pixel and sometimes dont line up. This is basically what I'm doing:
body{
background: #999 url(/images/main_bg.gif) repeat-y center;
}
#wrapper{
width: 1000px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
}
My background image is 1050px. So when it calculates the center of the background and the center of the wrapper div sometimes they're the same and sometimes one is off by one pixel as you resize the browser window. I figured out I could fix this problem if I made the background image the background of the wrapper and then add padding left and right of 25px but then the width of the background is counted on the total width and I don't want people with 1024 monitor res. to have to scroll just to see extra background. Is there a fix for this?? -
- CommentAuthormau_mostudio
- CommentTimeJun 14th 2007
To know more about freelancing
experiences and new freelance works visit
http://tinyurl.com/yr4k7n
http://www.getafreelancer.com/affiliates/L
antis/ -
I've got exactly the same problem (albeit with a much more complicated layout).
-
- CommentAuthorG.Cyrillus
- CommentTimeDec 6th 2008
Hello,
not too sure to see your exact problem .
If the background centers fine but is One pixel 'jumpy' in IE , add 1pixel padding-left to html (standard mode ) .
If your background center on the viewport , then add a background to html , a color , one pixel image on no-repeat and négative position ,... whatever suits you , you only need to set a background to html and to body .Once html has a background , the body backgrounds is then set on the width of the page and not anymore on the width of the viewport.
Hope that helps , english is not my mother language :)
GC -
hi.. i'm having the same problem..
i think it has to do with the fact that the size of the window is sometimes an odd number and sometimes even.. so when the browser engine divides the width / 2, to get the center, it gets different values for "background-position: center;" and "margin: 0px auto;"
i dont know why there's a difference though.. i guess it rounds the values differently..
did you find a solution? -
- CommentAuthorG.Cyrillus
- CommentTimeDec 15th 2008
Hello ,
<<<
is sometimes an odd number and sometimes even.. so when the browser engine divides the width / 2, to get the center, it gets different values.
>>>
did you try to fix a padding-left or right of one 1px to html or body to modify mathround for the position of the margin:auto container .
usually , difference of that kind shows up in IE , is it your case ?
Else , with not much details , difficult to get your problem(s) , There is many reason to get this to happen.
Where do you apply the background , does it center on the page or the viewport width , wich size for the image , is there a valid doctype , wich browser , size of content over it , and so on ....
GC -
-
CommentAuthorbenjitastic
- CommentTimeDec 15th 2008
I've had this problem happen when I combine two different methods of centering (i.e. background-position: center and margin: 0 auto).
Fix: http://www.positioniseverything.net./bg-centering.html
More: http://www.scriptygoddess.com/archives/2007/01/08/1px-background-image-shift/
I hope that helps. -
1 to 7 of 7