Find solution
How to subtract background from an image?

IE scrollbars shifting placement of centered background image!

  • CSSfilter: Explorer's scroll bars shift http://robsdemo.com/test.shtml centered background image http://robsdemo.com/test/BG_Too_High.jpg or http://robsdemo.com/test/BG_Too_Low.jpg by about ten pixels when the browser width is less than 880 pixels wide (in other words, on a laptop). Arrgh! It should look like http://robsdemo.com/test/BG_ok.jpg. Is there a better way to force a centered background image to really be CENTERED?!? I'm redesigning my portfolio. The new design is based on an 880px by 420px block (a div). Inside that div are other divs being slid into place when a link is clicked. I'm using a background image to add a 5px black outline and shadow effect around the 880x420 block... ...but IE is screwing up the placement of the background outline/shadow when a bottom scrollbar first appears. The issue might be that, for whatever reason, IE is adjusting the placement of the background image but not the placement of the div when the scrollbars appear? Or vice versa. Either way, it makes the design look like crap when it happens, so I need to find a fix! I'm centering the background image in the body section of my css. It works perfectly everywhere except in IE when the viewable browser space is right around 880 px, which seems to happen a lot in laptops. Any tips or tricks here? Got a fix? I'm at a loss! Just for the record, I'm a Mac guy and am borrowing a friend's laptop for testing purposes. Coding by hand.

  • Answer:

    Hmmm...I'm more a programmer than a designer, so I've never really gone for pixel perfect myself. However, could this be from the whole http://css.maxdesign.com.au/listamatic/about-boxmodel.htm issue? Looks like you're not explicitly setting the padding or border of #pageholder. You might experiment, to begin with, by setting both padding and border to zero for these. You should probably also set the border, padding, and margin of body to 0 too, just in case. But again, my expertise mostly lies outside of CSS.

2oh1 at Ask.Metafilter.Com Visit the source

Was this solution helpful to you?

Other answers

Also, it's hard for me to tell since the shot is a bit small and not lined up, but it appears that it's the central content that is moving around, not the shadow. I know it's nowhere near as nice, but you could just do a straightforward border: 5px solid black in #pageholder. This would have the added benefit of clearing up once and for all whether or not the centering problem was due to the background image or the middle-floating div. Also, I know you know this, but you know your website is basically completely content-free, right? I mean, there's a lot of visuals but if this is your main site then google is getting zilch. Personally, I'd put content into each panel and hide it using your favorite version of image replacement. Maybe that is further down the line.

Deathalicious

I'd get that background image off your body and put it in a container around your main panel*. That way the whole container can move your whole content area wherever the browser sees fit and you won't have alignment issues. * or on your main panel itself, if you're not using the background attribute on that already... either or!

springbound

"...the whole container can move the whole content area..."? 'scuse redundancy. I mean "the whole content area can move wherever the browser sees fit", duh. ;)

springbound

You can see what the design should look like http://robsdemo.com/test.shtml. I just edited the css and the background to ensure that the outline/shadow is dead center (it had been 15px higher to compensate for the menu below, which was also pushed 15px higher). It appears to me that IE is moving the centered background image before it moves the div that holds the pages when the scrollbar appears... but that's a guess. "Personally, I'd put content into each panel and hide it using your favorite version of image replacement. Maybe that is further down the line." Indeed.

2oh1

I viewed the site (on IE6) after you made the most recent change, and saw nothing like what your original images describe. But I have seen scrollbar-induced jumpiness before -- typically the suggested solution is to force scrollbars to be always visible, rather than "auto" -- so that the content dowsn't have to redraw when the scrollbar is introduced. You could wrap this code in a conditional comment for IE (especially if you can test on a couple different version of IE and just target the versions where the problem arises)

misterbrandt

try: body {background:#eaeaea} #slider { background:url(http://robsdemo.com/images/boxborderbackground.gif);padding:35px;}

nihlton

the reason you're not getting synced scrolling is because #slider is ~45px taller than your BG image.

nihlton

or what springbound said

nihlton

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.