Min-Height hack for Internet Explorer 6
Setting min-height in CSS is great until you cross browser check and surprise surprise, IE6 doesn't like it.
Here's a really neat quick hack to overcome the problem:
selector { min-height:500px; height:auto !important; height:500px; }
Full credit goes to this site http://www.dustindiaz.com/min-height-fast-hack/
How to set a DIV to the height of your site’s page
Ever wanted to add a semi-transparent overlay to your site, but can't get the div to be the complete height of your page across different browsers?
This bit of JavaScript should do the trick:
function zxcBdyWH(){ if (document.body.scrollHeight>document.body.offsetHeight) return [document.body.scrollWidth,document.body.scrollHeight]; // all but Explorer Mac return [document.body.offsetWidth,document.body.offsetHeight]; // Explorer Mac; }
This basically works out the total height of your page, then onload set the height of your div (using the correct ID) the the height of the page:
<body onload="document.getElementById('overlay').style.height=zxcBdyWH()[1]+'px';">This is necessary in all brosers, but particularly useful in Internet Explorer 6!
Forcing vertical scroll bars in Firefox
By default Firefox doesn't have the vertical scroll bar visible unless the page requires it.
On site where some pages need the scroll bar, but others don't this can make centered content appear to jump slightly to the left / right as the scroll bar is introduced and taken away.
Here's a nice CSS trick to force Firefox (and other browsers) to always show the scroll bar, even if it isn't required:
html {overflow-y:scroll;}
It's worth noting that this will prevent your CSS from validating - W3C returns the following message:
Property overflow-y doesn't exist in CSS level 2.1 but exists in : scroll scroll
Credit goes to http://freizl.blogspot.com/2008/01/force-vertical-scroll-bar-in-firefox.html