New Bookstore! Save 20% on books with discount code: LAUNCH
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 = Designer. Developer. Producer. Writer. Editor. Etc.
USP Pro: Unlimited front-end forms for user-submitted posts and more.
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 »
BBQ Pro: The fastest firewall to protect your WordPress.
Thoughts
Book updates complete! DigWP, .htaccess, Tao-WP, and WP Themes books all updated and current with all the latest.
Stop giving so much juice to social media. Get a site and OWN your content.
I would give my left testicle for macOS Finder to remember column widths.
The chemical name for titin (the largest known protein) has 189,819 characters and takes several hours to pronounce.
Working on book updates, should be available for download sometime next week.
iCloud is like the Terminator. It will never stop trying to get your data. An endless fight on each Apple device to keep iCloud disabled and empty.
Take a screenshot with Firefox (no extension required). Open Developer Tools Settings and enable the “Take a screenshot” button. Then click the button :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.