IE Bugs

I'm just posting this as a record for myself. It has already been documented on the net a zillion times. Here are some of the most common IE/IE6 bugs I've had to deal with in my days:

Margin-doubling Error: IE6 doubles margin-left or margin-right on a floated element. The fix for this (as found here) is to add "display:inline" to the floated element. A question that arises, is that whatever you wanted that element to be a block element? Well, if you still give it a fixed width and/or height, it should still behave the way you expected it to.

Negative Margin Clipping Error : If you have an element wwith a negative margin inside a parent element, The parent element will likely "clip" the child element's background. So the child element will not be visible. A fix for this is to add "position:relative" to the CHILD element, i.e. the element which has the negative margin.

IE shifts elements by their margins when the window resizes : alright this is extremely weird and I spent way too much time than I should have trying to figure it out. It's a bit complicated to explain as well. Basically I had a floating relatively positioned element with a left margin inside a container. Everything was fine when the page loads. But for my application, I had to dynamically resize the container (using jquery animate). As soon as I did that, the floated element would lose its margin ... it would get it back again when I hovered over it. Anyway, adding position:relative to the PARENT seemed to fix it for me ... and I have little idea why.