38 Comments // Filed in Web

High Res Problem on Windows

added: Summarized update here

My client woke me up with an interesting problem today. After talking to me and Dell customer support, he found out that one widescreen monitors under supremely high resolutions (he’s at 1680 ? 1050) Windows, the font sizes default to 120dpi. Oh, and added to that, Internet Explorer decides to increase your image sizes to match the higher font size. So what’s the result?

Here’s my current (still under development) live site. Here’s my client’s screenshot. Notice how the top navigation wraps strangely. Notice how the image replacement in the right-hand column is cut-off. Also notice that the images are all disgustingly pixellated as if I set the JPG quality settings to 0. But believe me folks, that’s not bad lossy, the images look jagged like that because IE has decided to — by default — to increase the images to match the text. I asked my client to visit my own website (what you see here) and a couple of other CSS websites, and he mentioned problems with text overlapping some images as well as poor image quality.

With the adoption of widescreens becoming higher, especially amongst the decision-making executive types, this is definitely a cause for concern. Because of the higher DPI, the increase of text and images can result in breaking a CSS layout and making images fuuuugly. It doesn’t matter if you set the fonts to pixels — IE scales that too.

Yes, this is default behaviour on computers with widescreens.

So, I screamed at my monitor for a while.

Fortunately, there is a bit of a workaround. There is an MSDN article that gives you a bit of a registry hack that isolates the culprit.

HKEY_CURRENT_USER > Software > Microsoft > Internet Explorer > Main > UseHR= dword:00000001

So, what does that mean to a layman? Explain this to your client:

1. Go to Start > Run
2. Type regedit and press OK
3. Click on the triangles beside the folder HKEY_Current_User, then the triangle by Software, then Microsoft, then Internet Explorer, then Main
4. Fine the term UseHR on the right-hand window pane
5. Right click over the UseHR and choose modify
6. When the new window opens up, change the Value from 1 to 0. Press OK.
7. Get out of Regedit and close all instances of Internet Explorer.
8. Open up Internet Explorer again and visit the website
9. The end.

This is inexcusable behaviour for Microsoft and Internet Explorer. This should not have been placed automatically on the registry, and there should have been an easier way to turn it off without having to resort to fiddling with the registry. Can we make this another request to the IE team to fix? Please?

If someone can make me a .reg file that is just easy to download that applies this change immediately, please contact me with the file! Thanks very much.

Cal generously let me know how to make the .reg file, so here it is for your convenience. Please Right Click > Save As. The file is suppiled as-is, and I have no guarantee it will work perfectly. But I tested it on my end and it seems to have worked, so please test before deploying on your clients. Remember, this is only for widescreen users in high resolutions. No one else seems to be affected.

added: also, if anyone knows a css hack, I’d like to know about it!

added: please check the comments for updates on this! :-)

added: Summarized update here.