css absolute positioning hidden scrollbars ... with a twist

I'm working on a website that targets 1024 X 768 as the minimum resolution. So, we're at about 970px wide. Design came back with an interesting layout that has a centered site with a banner that actually exceeds this width (1288px to be exact) that will look good for users with greater resolution, but look fine at 1024.

So, to prevent scrollbars from showing up for those at 1024 I positioned the banner absolutely and used overflow-x: hidden on the body. This works just fine across our target browsers.

Now, the client has come back and asked for scrollbars to be present for users on 800 X 600 (yes, this is not the target) so they can see a critical login button.

How can this be accommodated for those 2% of their users without making radical changes? All I can think of is to detect their screen width a开发者_运维百科nd remove the overflow-x:hidden.

You have to love when requirements change late in the build process!

Edit - here's what I have that seems simple enough to me - any caveats here?

if (screen.width < 1024) {
    $("body").css("overflow-x", "visible");
}

How about breaking the banner into three parts.

1. The left side beyond 800 pixels.
2. The center 800 pixels.
3. The right side beyond the 800 pixels.

Then set overflow-x: hidden; only for 1 and 3.

That way, if the center 800 pixels get cut off, they will get a scroll bar. If the user can see, say, 1100 pixels but not the whole banner, they won't get a scroll bar.

I'd say your idea to detect the screen width and then remove overflow-x:hidden is probably best. It should be pretty simple to do with some javascript.

How about something like this (try it)? The last selector is for at least minimal compatibility with IE 6. Of course you should tweak/lower the min-width I specify so that it works the best with your layout.

html {
    margin: 0;
    overflow: auto;
    padding: 0;
}

body {
    margin: 0;
    min-width: 1024px;
    overflow-x: hidden;
    padding: 0;
}

* html body {
    width: 1024px;
}

You could use a <div> with a background image for the banner instead of an <img>:

<div style="background: url(/images/banner.jpg) no-repeat center top;"/>

The <div> will take care of the clipping, overflow, and sizing issues for you and you won't need a bunch of overflow hacks.