Internet Explorer seems to do some crazy stuff when it comes to padding and margins - we were often ending up with huge margins where we hadn’t even specified any. A useful approach pointed out by Josh was resetting the margin and padding for the whole page so that IE’s default padding was removed. Putting the following code in your style sheet will do this: _~css * {padding:0;margin:0} _~

Despite the fact that we start with IE and Firefox on an even keel, there were still differences in how they rendered some spacings that we tried to apply. I don’t think this is necessarily a good long term fix but it seems that if you start a property name with an underscore IE will respect it but Firefox will ignore it. This is known as the MSIE underscore hack, which describes it fairly accurately! We can therefore set up IE only CSS properties like this: _~css _margin: 0 0 2px 0; _~

One of the other problems we came across was the hidden text bug - sometimes when we refreshed the page text inside a floating div would just disappear until you selected it with the mouse when it would reappear. We found a couple of posts which explained that the problem was being caused by IE not correctly setting the element size for floating elements on the page. The other posts go into more detail, but the fix that worked for us involved forcing IE into layout mode by applying a small height to the element that was being hidden: _~css .visualIEFloatFix { height: 0.01%; } _~