SuperFineShag

How to debug your css quickly in all browsers…
First of all, buy lots of computers and load every browser in the sun on them. Or if like me you find this a little unpractical then buy an intel mac.

First of all i’d advise to get everything looking good on Firefox - it is more standard compliant than the rest and is a great starting point to getting your css sorted.

• Download Firebug: http://www.getfirebug.com/

  This is a great way to look at your CSS, and a lot more besides. It also allows you to edit your CSS (and html) right in the browser, allowing you to quickly try stuff out.

• Install Parallels and a version of Windows. With Parallels you can have multiple installs of Windows, allowing you to install every version of IE (each one will need a new windows install i believe)
• For IE download the IE Developer Toolbar. This gives you much of the Firebug functionality within IE

I always try and aim to solve any cross browser problems by finding a happy medium, rather than hacking about too much - this is often a bit of a nightmare when you want to change something later on, as you’ll have more CSS to change, and it increases the download size of your CSS. But here’s some hacks you can use to target IE (there are loads more, just google):

#css-id-tag {
padding: 7px 0 0 10px; /* for all other browsers */
}
* html #css-id-tag {
\padding: 7px 0 0 10px; /* for IE5 and IE6 in quirks mode */
p\adding: 9px 0 0 10px; /* for IE6 in standards mode */
}

Here’s a method of targetting the other way round which can also be useful, this particular example is for forms:

#edit-submit {
height: 55px; /* For all browsers */
cursor: pointer; /* hand-shaped cursor */
cursor: hand; /* for IE 5.x */
}
form>#edit-submit { /* For non-IE browsers */
height: 0px;
}