Browser Specific Styles

ie6, the bane of our existence

There's an infinite amount of posts all over about how to 'tame the beast', as it were... Despite this, here's a few ways I've dealt with browser specific quirks and general unpleasantness, to make my designs cross browser friendly and client friendly (this usually means taming the unwilling ie6)

  1. Separate Stylesheets

    Creating a separate stylesheet for specific versions of IE is really easy, and a good idea if there are going to be lots of separate styles or tweaks on a per browser basis.

    How to Use

    In the <head> of your document, below where your stylesheets are being called, include:

    <!--[if lt IE 7]>
   <script type="text/css" src="/path/to/style.css"></script>
<![endif]-->

    Replace the script tag with anything you want IE older than IE7 to execute, this can include but not be limited to JS or inline CSS.

  2. CSS Selectors

Min-height fix for ie6

This fix allows ie6 to show min-height on content without /actually/ supporting 'min-height'

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

(This works for max-height as well!)