While i was fixing some css issues today i realized that there are some basic rules we tend to ignore when we create our styles. Modern browsers like Chrome or Filezilla are usually working properly anyway because for “them” your solution makes sense and they understand, if i can put it like this, what you are trying to obtain, but IE is not that “ignorant”. No!  IE has special needs!…

1. Don’t forget to put a size for a floated item. Else IE may see the things a little different than you
2. Also for the floated elements if you want to have them inline one next to each other put a “display: inline-block;”
3. If you want to use a css selector check a list with the selectors browsers support (sometimes i’m using this one but you can also search on Google, there are a lot of them) because especially IE7 has a lot of selectors on its blacklist
4. If you have an image in a link and if you don’t want a border for it, add “border:none;”
5. Add an item with “clear:both;” (a br or a div for example) after floated items.

Also you can always use conditional comments like

<!--[if lte IE 7]>
Make IE7 happy.
<![endif]-->


but try to keep things simple. And… i think once you get something working in a browser like IE 7 or 8 it will work for sure in the normal browsers.

PS: I will get back with more “tricks” for IE issues