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 (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!
![[ Photo of Mr. T ]](http://perishablepress.com/press/wp-content/images/2006/misc-chunks/spamless-email.jpg)
Let’s face it, spam sucks. Give spammers the figurative finger by using this nifty bit of JavaScript to hide your email address from the harvesters. Here is an easy “copy-&-paste” snippet for including a spam-proof email address in your web pages. Although there are a million ways of doing this, I am posting this for the record (and because I just can’t stand deleting usable code). This technique uses JavaScript, and therefore is not 100% ideal for all users. My advice would be to include a 
| #1A1A1A
| #383838
| #666677
| #E1E1E1
| #F0F0F0
| #F2F2F2
| #F3F3F3
| #FFFFEE
| #CCDDAA