IE css hacks

Pretty much anyone who's ever made a website will have experienced the frustration of cross browser compatibility. It turns a simple static website build into a nightmare of testing, updating, googling and swearing for hours on end (the most popular 2-word phrase in the SiS office is probably "f*cking IE!"). The reason for focusing on Internet Explorer is that other browsers at least make an attempt to comply with the W3C guidelines for HTML and css coding, microsoft more or less chose to make up their own rules as they went along.

Below are a few tricks to help you solve that painful problem which forced you to google your way here in a fit of swearing..

1. Make all divs equal.
Different browsers apply different defaults to divs and other tags. A quick and easy fix is simply to force your own defaults by putting the following in your stylesheet.

div, img, table, tr, td, ul, li, p, h1, h2, h3, h4{
padding:0;
margin:0;
border:0;
}

2. Use Internet Explorer specific stylesheets
Putting the following code between the head tags will cause the stylesheet to be used by IE only.

<!--[if IE]>
<link rel="stylesheet" href="css/ie_hacks.css" type="text/css" >
<![endif]-->

3. Track down the divvy div.
Quite often you'll find a div has been forced out of position because it won't fit where you put it or because another div has shoved it out of the way. An easy way to find the cuprit is to add a border to your divs - make each one a different colour so you can tell which is which and that troublesome div will make itself known.

More tips coming soon...