An old page that displays correctly in FF4 and Chrome doesn't display as well in IE9. The page validates (HTML and CSS). To debug this, page elements were removed and simplified in an attempt to expose the problem, and borders added. It was found that simply removing certain elements, even just white space between block elements, affected a table layout by IE9 -- why? Why just IE9?
The HTML is linked below, and here's a screen capture of how it is rendered by IE9 (recall that elements were removed and replaced to simplify the page). The lower table (the one with 1px black borders and two rows) is rendered (seemingly) incorrectly:
The HTML of the page includes a long length of blank lines (generated as a side effect of JSP processing). These blanks shouldn't affect the page (recall that the page validates).
The first cell of the first row, containing 'xxxx' text, has colspan=2, but it doesn't seem to span the first two cells of the second row (which contain 'a' and 'b'). There is a larger-than-usual space at the arrow. It seems to be acting as if there is a cell in that wider-than-usual gap. Why? There is a long length of blank lines (spaces and line-feeds) in the file there. Could IE9 be interpreting blank lines as cell content?
If some blanks are removed, eg., blank lines 200 to 250, the table layout changes to this correct rendering, below:
The layout is affected by removing other seemingly-unrelated lines as well: If lines are taken from the HTML above the affected table (eg., if the script section is removed, or either of the tables above the affected table, or even just text), the table is affected.
Even if there is malformed HTML (but where?), why would removing blank lines affect things?
FF4 and Chrome10 display the page 'correctly', regardless of the number of blank lines, etc. It is also displayed correctly by IE8 and by IE9 when forced (using F12 developer tools) to 'IE8 standards'.
I can force IE8 rendering (using X-UA-Compatible) but would like to know what's up.
I'd appreciate any insights. Thanks for your help!
Here's the HTML (with blank lines between table cells): puzzle.html. Here's the same file but with some of the blank lines removed: puzzleMinusSomeLines.html. On my Win7 machine, these two HTML files are rendered differently by IE9, but FF4 and Chrome10 render them identically (as I expect).
ps. Piwik code is added by the server to the end of the page when you load it, but you can save the HTML locally, remove that Piwik script at the end, and see that it makes no difference. However, removing lines above the table of interest, or blanks, does have an effect.