/* Browser Specific Styles */

#posted-by { Alexa Booth; } #date { June 1st 2009; }

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

    There's many selectors that IE6/7 or other browsers don't fully support or don't support at all, either because they are part of CSS3 (and the browser may yet have support for) or in the case of older browsers, such as ie6, will not have have support for, so can be safely assume those browsers will not be effected by such selectors, while newer browsers will be.

    An indispensable resource is Quicksmode's CSS selector tables.

  3. Making Use of Browser Quirks

    Some browsers have quirks that you can exploit to create browser specific styles, such as * html selector, technically, there is no element higher than HTML, so for all browsers but ie6, it will be completely ignored.

    Example:

    #container {
	width: 120px;
}

/** For IE6 **/
* html #container {
	width: 100px;
}

    This is really the only one I use to filter out CSS to IE6 in the global stylesheet. Remember kids,
    Hacks are bad :(

Think that's about it. Ideally, browser specific stylesheet would contain browser improvements such as pretty CSS3 styles like Rounded Corners of love, and less about fixing layout bugs, though in complex layouts it may be necessary :)

If you're having trouble with your css layouts when testing in ie or other browsers, try reading up on quirks, bugs, solutions, for the browsers that you commonly use and test on, and soon it won't be quite so bad; your css and page layouts will start to work mostly out of the box.

.categories {; }

/*Comments*/

~/Home