IE8 CSS Rendering Order

Recently on Catalog Choice we started receiving complaints of our login buttons not being visible in IE8. After some investigation we found a combination of a slower connection and IE8 CSS rendering to be the cause.

IE8 would download and render the CSS before images in our CSS file had loaded.

Because we used the Phark Revisited image replacement technique our users were left with link text negatively indented off the screen and no CSS background images.

We were able to simulate the slower connection behavior using an IP firewall, ipfw.

sudo ipfw pipe 1 config bw 28kbits/s

sudo ipfw add 1 pipe 1 src-port 80

sudo ipfw add 1 pipe 1 dst-port 80

sudo ipfw delete 1 (to remove when finished)

This then gave us an environment to simulate the bug without needing to reopen our AOL accounts. To fix the bug we move towards the Gilder/Levin Method.

With Gilder/Levin users on IE8 will still see missing images but the link text is left in place allowing a user to login.