/*
File that modifies the Yahoo grids.css CSS settings for Consensus.
The most important chnage is to correct the IE5 and IE6 problem caused by the
lack of min-width for this browser. Details of this follow below.
The fix applied requires IE to operate in Strict mode (not quirks mode).
The YUI CSS files are now totally unchanged, and the 3 files could be replaced
by the combined compressed version: reset-fonts-grids.css.
*/
/* IE min-width fix for YUI grids.
See here for the original fix by Stu Nicholls:
http://www.cssplay.co.uk/boxes/minwidth.html
See here for a discussion of Quirks Mode vs Strict mode:
http://www.quirksmode.org/css/quirksmode.html
See here for a list table of how browsers select Quirks mode or strict mode:
http://hsivonen.iki.fi/doctype/
To put IE into Quirks mode, include no or certain ,
or plus at the top of the HTML file, like this:
To put IE into Strict mode, include just a like this:
The original site suggests this for Quirks mode (designed for a 90% wide div, minumum width=400px):
// for all browsers that understand min-width //
.container2 {position:relative; width:90%; min-width:400px;}
.holder2 {display:block; color:#000;}
// method 2 a bodge for IE browsers IE5.01, IE5.5 and IE6 //
* html .container2 {border-right:400px solid #fff;}
* html .holder2 {float:left; position:relative; margin-right:-400px;}
This requires two nested divs like this:
The original site suggests this for Strict mode:
// for all browsers that understand min-width //
.width {width:90%; min-width:400px;}
// the bodge for IE6 browsers //
* html .minwidth {border-left:400px solid #fff; position:relative; float:left; z-index:1;}
* html .container {margin-left:-400px; position:relative; float:left; z-index:2;}
This requires three nested divs like this:
*/
/* Here is the fix for IE in strict mode */
/*created new, narrower fluid panels - CGP changed 750px to 700px. Yahoo says this:
We've made it easy to customize the page width. Divide your desired pixel width by 13; the result is your width in ems for all non-IE browsers. Take the em width you just calculated and multiply it by .9759 to find the width in ems for IE. */
/* LATER: reduce 700px to 685px to give better alignment of LHS panels when Extra launches at 480x480 */
#doc3-700 {
position:relative;
width:98%;
min-width:700px;
margin:auto 10px;
text-align:left;
/* 750px widths:
width:57.69em;*width:56.3em;min-width:750px;
600px widths:
width:46.15em;*width:45.04em;min-width:600px;
margin:auto 10px;
width:auto;
*/
}
/* A bodge for IE browsers IE5.01, IE5.5 and IE6 in Strict Mode*/
* html #doc3-700 {border-right:700px solid #fff;}
* html #doc3-inner {border-left:700px solid #fff; position:relative; float:left; z-index:1;}
* html #doc3-inner2 {margin-left:-700px; position:relative; float:left; z-index:2;}
/* The following are modifications to the standard grids.css */
/* Changed margin-left from 2% to 1% and 1.895% to 0.895%*/
.yui-gb .yui-u,
.yui-gc .yui-u,
.yui-gd .yui-u{float:left;margin-left:1%;*margin-left:0.895%;width:32%;}