CSS Hack Dumpster

Consider this page a virtual dumpster of wonderful CSS hacks..

Commented Backslash Hack V2

This hack effectively hides anything after the \*/ from MacIE5:

/* commented backslash hack v2 \*/
div#something {
   boder: thin solid red;
}
/* end hack */

May also be used for CSS import directives:

<style type="text/css">
/* commented backslash hack v2 \*/
	@import url(http://www.site.com/stylesheet.css);
/* end hack */
</style>

Fix Division Widths in IE

Fix IE’s crazy box rendering. The first line limits to only IE. The second line

* html div#somediv { /* limits to all IE */
   width: 300px; /* width for WinIE5.x */
   w\idth: 333px; /* width for other IE */
}
div#somediv {
	padding: 33px;
	width: 377; /* width for all other browsers */
}

IE Double Float Bug

IE doubles the margin of any divs floated in the same direction. Great. To fix it, simply display the floated element as inline.

Clearing Divisions

Here are four relatively equally effective methods for clearing unruly divisions:

<div style="clear: both;"> </div>

<br style="clear:both;" />

<hr style="clear:both;" />

div#unrulydiv {
   overflow: auto;
   height: 100%;
}

Clearing Floats

div.fix:after {
   content: ".";
   visibility: hidden;
   display: block;
   clear: both;
   height: 0; 
}
div.fix { display: inline-table; }
/* Hides from IE-mac \*/
* html div.fix { height: 1%; }
div.fix { display: block; }
/* End hide from IE-mac */

Or, you could float the parent div, and perhaps any other parents of the parent div — i.e., the float nearly everything method.

Box Model Hacks

IE versions below 6 render element width values to include borders and padding. This hack utilizes comment hacks to hide from all IE5.x:

div#somediv {
width: 33px; /* width for all browsers */
width/**/:/**/ 77px; /* first hide from IE5.0 then hide from IE5.5 */
}

Target Safari/Webkit/KHTML

body:last-child:not(:root:root) div {
	rules: target Safari/Webkit/KHTML only;
}

Target Firefox

This hack targets the body element in Firefox 1.5 & 2.0 only, but is not valid CSS2/CSS3:

/* targets body element in Firefox 1.5 & 2.0 only - invalid CSS2 & valid CSS3 */
body:empty {}

Target/Filter only Internet Explorer 7

Here are several hacks that target IE7, some valid CSS, some not (see code comments for details):

/* targets body element in IE7 only - invalid CSS */
>body {}

/* targets IE7 only - valid CSS */
*:first-child+html {}

/* targets IE7 & modern browsers only - valid CSS */
html>body {}

/* filters IE7, targets other modern browsers - valid CSS */
html>/**/body {}

Target/Filter only Internet Explorer (IE7 and below)

Here is our growing collection of hacks targeting all Internet Explorer, including IE7 and below:

/* targets all descendants of the html element in IE7 & below - invalid CSS */
html* {}

/* applies property in IE7 & below - invalid CSS */
selector { attribute: property !ie; }
/* applies property with importance in IE7 & below - invalid CSS */
selector { attribute: property !important!; }

/* targets IE7 & below - valid CSS */
a:link:visited, a:visited:link {}
/* may be used to target any element */
#target:link:visited, #target:visited:link {}

/* targets IE7 & below - valid CSS */
*:first-child+html {} * html {}

/* applies property in IE7 & below - invalid CSS (this hack is not recommended) */
*property: value;

/* imports stylesheet in all major browsers except IE7 & below */
@import "non-ie-styles.css" all;

Target only Internet Explorer 6 and below

/* applies property in IE6 & below - invalid CSS */
_property: value;
/* applies property in IE6 & below - invalid CSS */
-property: value;

/* targets IE6 & below - valid CSS */
* html {}

selector { 
	attribute: property !important; /* targets all major browsers */
	attribute: property; /* targets IE6 & below - this value overrides previous value */
} 

Filter Opera / Target Opera

This hack filters Opera (version 9 and below) and targets all modern browsers including IE7:

/* selects body element with class page-body in IE7 & all modern browsers except Opera 9 & below */
body[class|="page-body"] {}

Conversely, this hack targets Opera 9 and below:

/* targets Opera 9 & below - valid CSS */
html:first-child {}

Fun with the input (disabled) element

Employing the disabled attribute of the input element, it is possible to target a wide range of specific browser types. Given this (X)HTML markup:

<input type="hidden" disabled id="dis" />
<p>target element</p>

..it is possible to target and filter our CSS by using any of these hacks:

/* filters IE7 & below - see below for more info */
input[disabled="disabled"] {} 

/* Firefox 1.5 & below, Safari 2.0 & below, Konqueror 3.5 & below (and perhaps future versions of these browsers) - valid HTML & invalid XHTML */
#dis[disabled=""]+p {}

* targets Opera 9 & below (and perhaps future versions) - valid HTML & invalid XHTML */
#dis[disabled="true"]+p {}

More to come!

About the Author

Jeff Starr = Web Developer. Book Author. Secretly Important.