Often used CSS hacks

1. IE6 and IE7 targeting

#my_element {
    color: #999;  /* Targets all browsers */
    *color: #999; /* Targets IE7, IE8 compatibility view, and below */
    _color: #999; /* Targets IE6 and below */
}

I'm aware of the "* html" hack (star html hack see more) and IE if declarative. But I personally prefer this trick. It's pretty self explanatory and easy to maintain (not to have more than one CSS files or rules).

2. Min height

We want to have a content with 50-pixel minimum height.

.content {
  height: auto !important;  /* All browsers except IE6 will honor !important */
  min-height: 50px;
  height: 50px;
}

IE6 will ignore the !important declaration, and it doesn't support the min-height CSS attribute, so the above CSS rule for IE6 is effectively same as "height: 50px". In IE6, if content has taller height than its container, the container's height will automatically expand. This makes min-height effect works on IE6.

I've run into cases where the above hack doesn't work on IE6 or IE7. You might need to add the following attributes to the above CSS rule:

*overflow: visible;       /* For IE7 and below */
*zoom: 1;                 /* For IE7 and below */

3. Float

The float CSS attribute itself is not sufficient to make float work as intended. You need this:

.float_left {
    float: left;
    display: inline;
    overflow: hidden;
    *zoom: 1;
}

If a floated element has a margin which goes the same direction as the float (e.g. left margin and left float), it will have its margin doubled in IE6. This might cause the floated element move out of its intended position. That's why the "display: inline" comes in, it fix this so called double float margin bug (Learn more about double float margin).

"overflow: hidden" is to clear floats so that the height of the container of the floated element will expand to contain the floated element. For more explanations, please see Techniques for Clearing Floats.

If you cannot have "overflow: hidden" for whatever reason, you can replace it with "overflow: auto".

"*zoom: 1" will make sure that the floated element's "hasLayout" property is properly set in IE6 and 7. A lot of IE related bugs are caused by the fact that some elements need hasLayout to be set. (See more about the Microsoft only hasLayout property.)

4. Horizontal centering

.h_center {
    margin: 20px auto;
    width: 300px;
}

The centered element must have a fixed width, and auto margins on left and right. Margins on top and bottom can be anything you want.

5. Vertical centering

HTML markup:

<div class="v_center_outer">
    <div class="v_center_inner">
        content goes here
    </div>
</div>

CSS:

.v_center_outer {
    position: absolute; 
    top: 50%;
} 
.v_center_inner {
    position: relative; 
    top: -50%
}

The idea is to push the outer DIV down by 50% of its parent height, then pull the inner DIV up by 50% of its own height.

To make the "position: absolute" work in the v_center_outer DIV, the container of the v_center_outer DIV needs to have a defined height (either in pixels or a percentage), and its "position" cannot be "static" which is a default value. Typically, you can choose "position: relative" or "position: absolute".

See more about Vertical Centering at here, and here.

6. More hacks & tricks

• Sliding door effect for round corner panels
• Image opacity/transparency