A nice little IE6 css quirk

I recently ran into an issue with a clients site on IE6. The top navigation had a nice line at the bottom for no reason that I could see. All padding, margins and borders where removed from all elements and removing all elements besides some images and the main div did not fix the issue. Needless to say this led to lots of cussing, drinking of coffee, issuing death threats to IE and head banging against the desk (thankfully I didn't break my desk!).

I finally found the problem though! The issue was that all of the main elements were set to a position of absolute except for one image. Apparently in IE6 if you don't have all of your sub-elements as position absolute weird shit like this happens. I don't know if this is documented anywhere I didn't check but it sucked nonetheless.

Thankfully IE7 worked "correctly" although there are still a few small issues, but what browser doesn't have them?

Off for some more coffee and working on other boring crap.