Absolutely Positioned element disappears in IE6

This bug is not unlike the Duplicate Rendered Characters in IE 6 that I documented earlier, having to do with IE6 bugginess around floated elements near absolutely positioned elements.

PROBLEM:
I’ve got an absolutely positioned list item at the end of a bunch of floated list items.1 In between the first floated items and the absolutely positioned items, I have another block.

• The blue blocks were floated into place.
• The red blocks are nested inside blue_block_2.
• Red blocks 1 to 4 are floated into place.
• red_block_5 has to be positioned absolutely, otherwise it mucks up the elements in blue_block_3.

Everything looks good in Firefox, Safari, Opera, Chrome, IE7, and IE8.

But wait! That’s right. IE6 needs to suck up more precious minutes in my dwindling life supply; it hides red_block_5.

Using the IE Developer Toolbar, I can make the block reappear by typing…well, anything into the style attribute: zoom, display, etc.

But when I try any of these in the IE6 stylesheet, nothing changes.

SOLUTION:
Craig Buckler at SitePoint explains that IE6 hides absolutely positioned items if they’re coded right before or right after floated sibling elements. He suggested that adding an empty, static element (such as <div></div>) would make IE6 pop the missing element back in.

Sadly, this did not work for me. But thanks to one of his readers, Paul O’B, I found a solution that worked in my case. In the IE6 stylesheet, I added clear: both to the red_block_5 element. I also had to change the left positioning value, but that did the trick.

Happiness.

---

1. Many snarky commentators love to ask things like “why would you need to use absolute positioning anyway? Why not change the markup so the elements fall into place inside the appropriate containing element?”

My response is that my page is marked up the way it is because in the absence of stylesheets and JavaScripts, the content still flows logically, and all the elements that should be grouped together are grouped together.

“So why don’t you change the design to keep the elements together if they’re supposed to be together?”

Because visually, there are other elements that are more important, and my red_block_5 element can be shunted in favour of other visual hierarchies. Basically, there’s another element at the bottom of blue_block_3 that logically belongs within blue_block_3 (vertically), but also flows naturally after red_block_4 (horizontally).

So my case may be very particular, but I don’t think so. Besides, I don’t think I should have to give up either markup logic or visual logic just to make IE6 happy. That’s asinine. IMHO, IE6 just needs to go away.