website style problem

[daibhidh]

Re: https://addons.mozilla.org/firefox/plugins/

Problem: <div style="margin-top: 5px; height: 50px"> and other div elements with fixed pixel heights.

Symptom: Text on a high-pixel-density display does not fit inside the fixed-height div elements, resulting in overlapping text that is very difficult to read.

Solution: Remove the height restriction, or change 'height' to 'min-height' if that is what is desired. Alternate solution is to size type in pixels, but this can result in very hard-to-read text on high-pixel-density displays.

Notes: Decent GUIs allow setting display pixels per inch (ppi). In my case, a 22" display at 1600x1200px is set to 133ppi. At this setting, 10pt text on screen appears as 10pt text on a 'real' document at arm's length, and the letters are better-formed than at the 'standard' display ppi of 72 (old Mac), 96 (Windows small fonts) or 120 (Windows large fonts). Webpage designers should not assume all viewers will have displays with the same ppi as their own.