1

When setting my header and footer to 100% I get some strange behaviour in FF4, Safari 5 and Chrome 12 on Mac OS X. If I have my browser window at a high resolution and scale it down horizontal scrollbars will appear, even though the content should scale with the browser window.

I saw this thread which seemed to have a similar problem, though the user never seemed to find a solution: CSS 100% width on browser resize

Overflow-x doesn't work for me as the error labels, which are absolutely positioned, will behave as fixed positioned.

DEMO here (errors on blur):

http://kassekladde.tixz.dk/kontakt-os/

Thanks in advance

Community
  • 1
  • 1
Tixz
  • 135
  • 1
  • 8

2 Answers2

1

The problem is caused by #overlay. You have set visibility:hidden. This hides the content but allows it to still take up space on the page. If you change it to display:none instead it will hide the content and the space it takes up, stopping the scrollbars in the process.

#overlayis dynamically given a width/height as the page shrinks. As you can see below it reached width:1711px at one point and so scrollbars appeared:

<div id="overlay" class="overlay" style="width: 1711px; height: 1489px; visibility: hidden; opacity: 0; position: absolute; background: none repeat scroll 0% 0% rgb(0, 0, 0); left: 0px; top: 0px; z-index: 5000;"></div>
tw16
  • 29,215
  • 7
  • 63
  • 64
  • Thanks for the help! A side note for other coming around; MooTools Element.fade() doesn't set display:none; when opacity reaces 0, it sets visiblity:hidden; – Tixz Aug 19 '11 at 15:22
0

After looking over the CSS & html, the header and footer are both within a div with class 'container', which is defined to be a width of 980px, so both will only scale down until they reach a width of 980px, which is the behavior I am seeing in the browsers I tested with in Windows 7 (sorry don't have access to MacOSX). Are you seeing something different or are you trying to scale them down less than 980px? If the latter is true, then you need to pull them out of your container class.

Ben.Vineyard
  • 1,149
  • 8
  • 14