Wednesday, 24 November 2010

Accents clipped off text in IE7 and IE8 with Compatibility Mode

As I work in Canada, which is a bilingual country, the applications I develop usually have to be available in both English and French. Today I had a rather odd problem regarding accented characters with missing accents.

The character in question was an 'É' and I had a bug where the accent was missing. My first call was the database to check the accent was there, and it was. So I thought it was being lost due to some difference of character set between database and application layer, but breakpoints showed it was all correct at the application layer. Next I checked the source for the rendered web page and that showed the accent was there too. I even tried a copy and paste of the text and pasting the text into an editor showed the accent was present, even though it was missing in the browser.

Some more tests revealed that the accent displayed correctly in IE8 with Compatibility Mode disabled, but when Compatibility Mode was enabled the accent was clipped off. I spent some time adjusting parameters on the ASP.Net Label control and at higher levels in the mark up to get the height to increase with no more result that lots of whitespace but no accent. I was able to get the accent to appear by sacrificing the bottom few pixels of the text when setting the valign property, but this clearly wasn't acceptable. By making the text size 11 or smaller the accent appeared, but at 12 or above it was missing.

After some more searching I eventually found the CSS property to fix it. By adding "Font" tags around the label and applying "line-height: 1.1;" to the style I got it to display the accent correctly.

It seems that in the IE8 beta, Compatibility Mode was actually called IE7 Emulation Mode, a name which they really should have kept as "Compatibility" is more suggestive of standards compliance which is exactly what Compatibility Mode/IE7 Emulation Mode/IE7 is NOT.

No comments:

Post a Comment