return to homepage

Web Scripts: Layout & Styles

Force Scrollbars

The trend of centering content horizontally brings with it a small problem. When moving from pages with short to long content, a nasty shift happens in Opera, Mozilla and Safari as the window makes room for the scrollbars. The only way to avoid this is to force scrollbars to appear all the time.

html { height: 100%; margin-bottom: 1px; } /* forces scrollbars in firefox etc */

Note: This isn't an issue with IE7 as it adds scrollbars automatically. However, IE8 doesn't do this - currently there is no hack for IE8 apart from forcing the browser into IE7 rendering mode.

Add the following meta-tag in the head section of your webpage above any linked files (i.e, above <link>…</link> and <script>…</script> tags) to force IE8 into IE7 rendering mode:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

 

 

(credit: http://hicksdesign.co.uk/journal/forcing-scrollbars-now-even-better)