Just when you start to get surprised at some of the complicated pages that IE7 can render flawlessly, you bump into another almost trivial page which the browser laughably fails on. I think I need to add some more tags for categorising my blog posts, as I don’t want to spend longer than necessary answering the question “Is this IE bug the same as one I’ve already reported?” It appears this one is new, though, so I will write it up. I should say that the bug does not affect Firefox, and I only found it after noticing that IE7 did not have the styling I expected for a piece of popular third party code. Admittedly I can’t state exactly how popular the code is, but it was at least of significant enough size that I did not want to consider maintaining a fork. The good news is I managed to work around the bug in this case with a one line fix, but that is largely to do with the nature of the page, not by finding a universal solution.
The code
The almost unbelievably simple code is here:
which clearly defines a set of evenly spaced “lorem”s and “ipsum”s. Perhaps a little less clear is that the “ipsum”s seem to float to the left, next to their respective “lorem”s, and prevent any further “lorem” appearing on their right, but both IE and Firefox agree on this. Also notice that this is valid HTML (as opposed to XHTML 1.1 which seems to scare people in some IRC channels and makes them refuse to give you help).
The problem and solution
What IE confusingly does is to vertically offset the first “ipsum”, for no good reason, but then not let this offset affect the rest of the page. Perhaps more strangely, this behaviour seems to require the outer containing <div> to be present, and also disappears if the vertical alignment rule is missing. This, it turned out, was the bug’s Achilles’ heel, though, as this rule was not necessary for an acceptable page styling. After removing it, the page looked the same and perfectly reasonable in both browsers, so I settled for this as my one line patch.
Is the Acid 4 test going to go back and test that browsers can actually implement the 10 year old HTML 4 spec properly?
