Internet Explorer 6 is (finally) disappearing. This is a good thing. Whether you can consider it dead at this point is a question for the individual web developer. When I was putting together a page for Fightcard I decided to consider it alive, which necessitated a number of hacks and workarounds. For the curious, I describe them below.
Justification
I wanted the central, darker-gray DIV to be 15em from the left edge of the BODY content area. You’d think it would be sufficient to set “margin-left: 15em;“, right? Wrong. On IE6, in the absence of an explicit margin-right, the DIV will be (sort of) centered. Setting “margin-right: auto;” forces an allocation of extra BODY width to the right margin, and fixes the problem.
Clipping
I wanted to fly my screenshots to the left of the copy text. Again, it seems that this should be simple: Left-float the images, and then assign them a negative margin-left to move them into the 15em left margin of the copy text. Not on IE6. If you’re floating something, and assigning it a negative margin, then it’s magically (and unalterably) clipped to its containing element. But, if it’s positioned relative, then it’s magically not clipped. So, setting “position: relative;” (with no top, left, etc. CSS settings) makes this problem go away.
PNGs
It’s well-known that IE6 doesn’t handle transparent PNGs. Happily, a lot of people have put a lot of work into creating (mostly) fire-and-forget workarounds to this problem. The workaround I chose was Drew McLellan’s supersleight, which required only that this snippet of code be added to my HTML file:
<!--[if lte IE 6]>
<script type="text/javascript" src="supersleight-min.js"></script>
<![endif]-->In Conclusion
This sort of thing isn’t my favorite part of programming. Hopefully, IE6 will soon be unambiguously dead and buried.
