IE Displays larger, low quality fonts & images

The Coach — Thu, 04 Sep 2008 04:41:24 +0000

One of the most frustrating aspects of web design is ensuring compatibility across different web browsers. The most frustrating for our team to date is the issue with Internet Explorer 7 and changing the DPI setting of the display in Windows.

The computer is a Dell XPS laptop, and it turns out that the DPI setting from the factory is set to 120 dpi. While browsing with Firefox, the web pages looked just fine. But when we fired up IE and had a look, the font sizes were scaled up dramatically and provided a jagged, low quality effect to fonts and images. The easiest fix was to change the default display setting from 120 dpi back to 96 dpi. This maintained the web page display with Firefox and improved the IE display of the web site so that everything looked proper. But we can’t go suggesting that all visitor change their display setting before coming to our web site.

Just to pause for a minute, this DPI setting is accomplished by right-clicking on an empty space on your desktop, and then selecting Properties from the resulting dialogue box. Once the settings window appears, select the Settings tab and then click on the Advanced button. A window will be displayed that has a drop down selection box that allows you to change the DPI of your display.

This raised some questions;

How many of our visitors are going to be visiting the site and experiencing the same problem?

Is there a way to determine the dpi setting of a visitor and reformat the page so it looks proper?

Based on our research across the web, the good news is that not a lot of manufacturers ship with the display set to 120 dpi. But Dell and possibly Toshiba are among the manufacturers that ship units with this setting from the factory.

We also discovered a couple of suggessted fixes for this that can be inserted into your CSS or HTML to try and compensate for the change. William’s Blog had a good post on how to handle the scaling and sizing of fonts using a conditional staement in your CSS file. We found another good article at Leading Edge Scripts that provides a Java Script to insert into your HTML file to accodate for the issue.

Is this a hint of the continuing issues to come for Web Designers that want to provide an equal experience regardless of the users browser? Let’s hope not. We will continue to monitor this issue and look for other solutions. Until then, if you have a proposed solution or suggestion, we would love to hear from you.

Related posts brought to you by Yet Another Related Posts Plugin.

Siam Communications Web Services & Tools » display issues

IE Displays larger, low quality fonts & images