Updated: 20090826 **ESSENTIAL HACKS!** Targeting all EXCEPT IE5/Mac Only: /*\*//*/ selector { property: value; } /**/ * html>body selector { property: value; } Targeting all EXCEPT IE6-7/Win Only: /*\*/ * html selector { property: value; } /**/ Targeting all EXCEPT IE5.x/Win Only: selector { property/**/:/**/ value; } Targeting all EXCEPT IE5.5/Win Only: * html selector { property: value; p\roperty: normal-value; } selector { property: value; p\roperty: normal-value; } Targeting all EXCEPT IE5.5-6/Win Only: * html selector { property/**/: value; } Targeting all EXCEPT IE<7: html>body { property: value; } Targeting all EXCEPT IE5-7: html>/**/body { property: value; } Targeting all EXCEPT Opera7+ Only: @media all and (min-width: 0px) { selector { property: value; } } Targeting Only IE5/Mac: /*\*/ selector { property: value; } /**/ @media all { selector { property: value; } } Targeting Only IE6-7/Win: html>body selector { property: value; } Targeting Only IE6/Win: selector { property /**/: value; } Targeting Only IE5.5/Win: selector { property: /**/value; } Targeting Only IE<7/Win: selector { _property: value; } Targeting Only IE5-7/Win: selector { ~property: value; } *:first-child+html selector { property: value; } * html selector { property: value; } Targeting Only IE7/Win: *:first-child+html selector { property: value; } Targeting Only IE8/Win: selector { property /*\**/: value\9 } selector { property: value\9 } Targeting Only Opera<=9: html:first-child selector { property: value; } !important HACK: #container { height: auto !important; // major browsers other than IE 6 and below respect the importance height: 50px; // IE 6 and below use this value instead since it ignore importance if property is later redefined } IE6-7 MIN-HEIGHT FIX: div { min-height: 500px; height: auto !important; height: 500px; } BOX-MODEL HACK IE<6: div { padding: 2px; border: 1px solid green; width: 20px; width/**/:/**/ 14px; // hidden from IE5.x } IE MIN-WIDTH HACK: #container { min-width: 600px; max-width: 1200px; width: expression(documentElement.clientWidth < 600 ? "600px" : documentElement.clientWidth > 1200 ? "1200px" : "auto"); } IE RESIZABLE DIVS HACK: #container { width: 80px; // IE reads as min-width height: 35px; // IE reads as min-height } html>body #container { // setting resizable for IE7 and Mozilla width: auto; height: auto; min-width: 80px; min-height: 35px; } TEXT/CONTENT OVERFLOW IN IE (mishandling of 'width' property as 'min-width'): - make sure text/content doesn't spill out of the box element in all browsers... so allow to auto resize #container { width: 40px; } html>body #container { width: auto; min-width: 40px; } CENTERING FIXED-WIDTH PAGE IN WINDOW: body { text-align: center; } #container { width: 770px; margin: 0 auto; // gives our element an automatic margin on the left and right to position in center text-align: left; } SHORTHAND METHODS: font: bold italic small-caps 1em/1.5em verdana,sans-serif; margin: top, right, bottom, left; margin: top, (right and left), bottom; margin: (top and bottom), (right and left); margin: all; CONDITIONAL COMMENTS: ... - IE any version of IE - lt IE $ver all versions < $ver - lte IE $ver all versions <= $ver - IE $ver only version $ver - gte IE $ver all versions >= $ver - gt IE $ver all versions > $ver - $var can be 5, 5.5, 6, or 7 VERTICAL-ALIGN HACK: - set the line-height to be the same as the height of the box div { height: 20px; line-height: 20px; } POSITIONING WITHIN A CONTAINER: #container { position: relative; } #innerdiv { position: absolute; left: 30px; top: 5px; }
...
CREATING ROUNDED CORNER DIVS .t {background: url(dot.gif) 0 0 repeat-x; width: 20em} // dot.gif are for the linear elements .b {background: url(dot.gif) 0 100% repeat-x} .l {background: url(dot.gif) 0 0 repeat-y} .r {background: url(dot.gif) 100% 0 repeat-y} .bl {background: url(bl.gif) 0 100% no-repeat} .br {background: url(br.gif) 100% 100% no-repeat} .tl {background: url(tl.gif) 0 0 no-repeat} .tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
Lorem ipsum dolor sit amet consectetur adipisicing elit
IMPORT RULES FOR IE5 MAC ONLY /*\*//*/ @import "ie5mac.css"; /**/ IMPORT METHODS @import "style.css"; /* hidden from nearly all v4 browsers */ @import url('style.css'); /* IE4 can understand, but not NN4 */ - hiding stylesheet from NS4 (use media type 'all') - hide stylesheet from IE4 (use media type diff than 'all') VERTICALLY ALIGN CONTENT WITHIN DIV
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec laoreet egestas mi. Aliquam erat volutpat. Aliquam erat volutpat. Suspendisse potenti. Suspendisse potenti. Vestibulum mi nibh, hendrerit nec, feugiat vitae, feugiat a, nisl.