Book Sale! Save 20% on WordPress books with discount code: SAVE20
Web Dev + WordPress + Security

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;">&nbsp;</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!

Jeff Starr
About the Author
Jeff Starr = Web Developer. Book Author. Secretly Important.
The Tao of WordPress: Master the art of WordPress.
Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
The Tao of WordPress: Master the art of WordPress.
Thoughts
On macOS when an app won’t hide, you can force it by holding the ⌥ (option) key and clicking anywhere on the desktop.
Currently having a blast redesigning Plugin Planet, so much work so little time.
Thanks to David McCan over at WebTNG for the awesome BBQ Pro review.
Enjoyed a nice mini-vacation with my fam. Great way to recharge and regroup.
Nice little interview with yours truly over at ThemeIsle. WordPress, web dev & more!
Perishable Press celebrating 16 years online! An incredible, rewarding journey.
Thanks to Nicholas Ferrell for his excellent and thorough review of Wutsearch search-engine launchpad.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.