Some 'dirty' hacks for a couple of my 'favourite' browsers!

As a follow up to my previous post on stopping development for IE6, I thought I'd share my knowledge of all the 'dirty' hacks that I'd picked up for IE6 and IE7.

They're not really 'dirty', but they're not always considered to be the best method because they cause your CSS to fail validation. For me however, they're just as effective as the conditional comment that people use to exploit IE's 6 & 7 to behave in the way they like.

I have used them many times, but have recently tried to switch to the conditional comment method. I do use them during development though, because I can just dump them into the CSS and HTML through the Firebug toolbar and I don't have to constantly switch between stylesheets.

There are two for IE7, but I'll just be using the one I've made use of more often because you generally use it to reset what IE6 gets wrong! I may highlight the other method in the future for reference purposes.

The code below shows how you would float an element and add a 100px margin to the left.

div {
  float: left;
  margin: 0 0 0 100px;
}

A problem with floats is that IE6 doubles margins ([among other things!), and it's a pain to get right when you have values that don't divide equally into two!

div {
  float: left;
  margin: 0 0 0 100px;
  _margin: 0 0 0 50px;
}

This would half the margin in IE6, which then doubles it giving you the correct value. The problem with this is that IE7 still reads this hack. Annoying. However, there are two ways to reset what you've just done. One way requires a new block of code, which just bloats things even more. The other, the one illustrated bellow actually mimics the IE6 hack, but only IE7 can read it!

div {
  float: left;
  margin: 0 0 0 100px;
  _margin: 0 0 0 50px;
  *margin: 0 0 0 100px;
}

The first margin is for all browsers, IE6 and 7 both read the second margin value, but then we make sure IE7 gets the value it really needs with the third one. This is three times the code we SHOULD need, but with the conditional comments, we'd be creating more files and more code because we'd have to re-define the selectors, so for the odd hack it's not so bad when it comes to development.

If you're finding that you've got more than 10 or 20 lines of hacks, it's probably better to organize them into a file on their own. The only drawback to this method is that your CSS won't validate, but as I suggested, keeping it either separate or after your real CSS, you won't run into any problems!

If you know of any other hacks, please feel free to comment.