IE scrollbars shifting placement of centered background image!

January 26, 2009 9:11 PM

CSSfilter: Explorer's scroll bars shift my design's centered background image up or down 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 this. 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.

posted by 2oh1 to computers & internet (9 comments total)

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 box model 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.
posted by Deathalicious at 9:46 PM on January 26

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.
posted by Deathalicious at 9:59 PM on January 26

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!
posted by springbound at 10:44 PM on January 26

"...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. ;)
posted by springbound at 10:48 PM on January 26

You can see what the design should look like here. 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.
posted by 2oh1 at 10:51 PM on January 26

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)
posted by misterbrandt at 12:46 PM on January 27

try:

body {background:#eaeaea}
#slider { background:url(http://robsdemo.com/images/boxborderbackground.gif);padding:35px;}
posted by nihlton at 1:26 PM on January 28

the reason you're not getting synced scrolling is because #slider is ~45px taller than your BG image.
posted by nihlton at 1:27 PM on January 28

or what springbound said
posted by nihlton at 1:37 PM on January 28