IE6 Min-Height Hack

IE6. No it’s not dead yet and still holds a significant market share. One of the many annoyances is that it does not support “min-height”. Fear not, there is a quick and simple workaround that is fully supported in IE6 and 7. It is completely safe to use in Mozilla/Firefox, Opera 7.x+, Safari1.2+  too, rejoice.

So here it is then:

selector {
    min-height: 500px;
    height: auto !important;
    height: 500px;
}

CSS Browser Specific Hacks

The different ways in which various browsers render the same CSS is a constant annoyance to web developers. Luckily there are certain hacks that can be used to target specific browsers. Some examples of these are as follows.

Internet Explorer 6

#selector{
_property: value;
}

Internet Explorer 7

/* Target IE7 and below */
#selector{
*property: value;
}

/* Then override for IE6 specifically */
#selector{
_property: value;
}

Firefox 2

#selector, x:-moz-any-link{
property: value;
}

Firefox 3

/* Target Firefox 2 */
#selector, x:-moz-any-link{
property: value;
}

/* Then override for Firefox 3 specifically */
#selector, x:-moz-any-link, x:default{
property: value;
}

Safari 3.0+

Please be aware that this is valid CSS3 and other browsers may support it soon.

body:first-of-type #selector{
property: value;
}