How Can I Identify Compatibility Issues in MSIE 8?

[davee123]

MSIE 8 "Compatibility View"

Ok, I have a webpage. Looks fine in Firefox, MSIE 7, etc. But MSIE 8 barfs it into a horrible mess.

BUT! It shows me a button called "Compatibility View" that magically fixes the problem.

... That's great and all, but I'm not about to go telling our clients to click their "Compatibility View" button to fix the problem. How can I tell what MSIE 8 is doing in "Compatibility View" mode? Is there a way to highlight in the HTML/CSS/JS source code what it thinks is the problem for compatibility?

DaveE

 

[Greg Bernhardt]

Give a link to the page and I'll check it out. You could add the "X-UA-Compatible" header to force compatibility mode, but you should really find out what is the problem and fix it.

 

[davee123]

Give a link to the page and I'll check it out. You could add the "X-UA-Compatible" header to force compatibility mode, but you should really find out what is the problem and fix it.

Unfortunately, I can't give out the URL, since it's only for paying customers of our company, but I do think I've found the issue:

I have a table with multiple rows. It's actually a table of holidays. So the first column shows the date of the holiday, and the next few columns give the details for where the holiday applies to (country X, market Y, etc). The first column's cells often have a multiple rowspan-- that is, a particular date's holiday is applicable to multiple countries and multiple markets.

However, we wanted to make the rows collapsible so that it can show a single holiday compacted to a single row. Solution? Make a Javascript function that toggles the visibility and display of a row. Great! Works in MSIE 6, 7, Firefox, Opera, and Chrome.

But in MSIE 8, what's happening is that the rowspan is getting us into trouble. That first cell shouldn't get hidden, even though it's displaying across the hidden row. In all the other browsers, when you hide a row (probably when you set the display property to "none"?), the first cell's rowspan gets adjusted automatically. In MSIE 8, it does NOT get adjusted, and it decides to re-render the table, forcing that first cell's rowspan down so that the cell gets displayed in subsequent rows.

So, the next solution will be to do the rowspan adjustment in JavaScript. BUT, we'll have to turn it off for all the OTHER browsers, since I expect it will cause problems in other browsers (including MSIE 6 and 7). So it'll have to ONLY go in for MSIE 8.

And given that this seems to work in EVERY other browser, I'm of the mind to think that it's a bug in MSIE 8 rather than a compatibility issue. Granted, it could be that not doing the automatic adjustment is a FEATURE, not a bug, since it gives more control over the table layout, but if so, I would hope that there would be some sort of CSS flag to trigger it, rather than being the default action, which is now in contrast to how it's been done everywhere else. Some CSS flag like "span-adjust: auto;" or something. But I haven't seen any mention of anything like that.

DaveE