Fixed full-width CSS header not scrolling correctly with narrow browser windows

views:

answers:

Fixed full-width CSS header not scrolling correctly with narrow browser windows

I'm currently redesigning a website and have run into an issue with horizontal scrolling when the page is viewed in a narrow browser window.

The header contains a logo, some text and a navigation bar and spans 100% of the page width, but the header content is centered with a fixed width of 940px. When shown properly, it looks like this:

Normal

However, if the browser window is resized to be narrower than the fixed width a horizontal scrollbar appears (as expected), but scrolling it 'cuts' the scrolled part out, producing the following result:

Scrolled

The work-in-progress site can be viewed live here, if the CSS/HTML can give you any hints as to what I'm doing wrong.

It works fine for me in Firefox 3.6.8, IE 8, and Chrome 5. ~~What browser are you using?~~ Looks like you are using Chrome.

Is the page being cached in your browser incorrectly? Try clearing your cache and then check the site, or try viewing it on another computer. The CSS for the header is straightforward and correct. Nothing there should be causing problems.

SimpleCoder 2010-09-07 20:33:39

It is broken for me in IE6, IE7, IE8, Safari, Chrome and Firefox (it is only broken when the browser window is narrow enough to warrant a scrollbar for horizontal scrolling).

Rezzie 2010-09-07 20:35:38

Try clearing your cache and then browse to the site.

SimpleCoder 2010-09-07 20:38:49

In IE6, I get separate scrollbars for the header. I suspect some overflow issues - will look at in depth later.

Traingamer 2010-09-07 21:36:13

+1 A:

The easiest way to fix this problem is to add min-width:940px to the body tag and use an expression for ie6.

Pavel Velikiy 2010-09-07 22:51:04

body{width:expression(document.documentElement.clientWidth < 940 ? "940px" : "auto");}So place it in your ie6.css

Pavel Velikiy 2010-09-08 00:28:45

Thank you; this has the desired effect. I'm guessing there must be a way of doing this layout without needing an expression, though? Is it just how I currently have the divs set up?

Rezzie 2010-09-08 00:36:33

Also - in IE6 and IE7 there is a black gap between the bottom of the logo and the top of the navigation bar. It doesn't appear in any other browser (including IE8) - how can I remove it?

Rezzie 2010-09-08 00:37:39

You can change .header {margin:20px auto;} to .header {margin:20px auto 0;}

Pavel Velikiy 2010-09-08 00:53:15

You, sir, are a legend.

Rezzie 2010-09-08 01:30:23

ansaurus

tags:

views:

answers:

Fixed full-width CSS header not scrolling correctly with narrow browser windows

related questions