When You Size Using Pixels, Things Can Break

Green Acres is the place to be, farm livin is the life for me. Then one day he was shootin at some food, and up through the ground come a bubblin crude, oil that is, black gold, Texas tea. Rugged rubber baby buggy bumpers.
To the right is the designed rendering. The text is 12px in a div 200px wide by 100px tall. All of it fits inside the borders, since the text is actually rendered at 12px as intended.
 

Green Acres is the place to be, farm livin is the life for me. Then one day he was shootin at some food, and up through the ground come a bubblin crude, oil that is, black gold, Texas tea. Rugged rubber baby buggy bumpers.
To the right is what happens because the design fails to take into account that 12px is too small to read at higher screen resolutions, when "the user" uses his browser's zoom feature to make the text 1/3 bigger (16px- the default size used by Mozilla, also the default size on 96DPI systems running Internet Explorer or Netscape 3 or 4 for Windows.) This box is also 200px by 100px, and "contains" exactly the same content, not all of which is seen, since it doesn't fit.
 

Green Acres is the place to be, farm livin is the life for me. Then one day he was shootin at some food, and up through the ground come a bubblin crude, oil that is, black gold, Texas tea. Rugged rubber baby buggy bumpers.
To the right is the same as above, except that "the user" has made the text twice as tall, 24px, a reasonable default size for those using 1600x1200 resolution.
 

Green Acres is the place to be, farm livin is the life for me. Then one day he was shootin at some food, and up through the ground come a bubblin crude, oil that is, black gold, Texas tea. Rugged rubber baby buggy bumpers.
To the right is the same as the second example above, except that the box overflow is allowed to remain visible. If the browser you view this with is web-standards compliant, the box (colored background) will remain the same size as those above, 200px by 100px.
 

Green Acres is the place to be, farm livin is the life for me. Then one day he was shootin at some food, and up through the ground come a bubblin crude, oil that is, black gold, Texas tea. Rugged rubber baby buggy bumpers.
To the right is a quite different design. Both the box and its content are sized using your default size, so all the content fits inside the box, regardless what size your default actually is.
 

Valid HTML 4.01!
Last Modified
2003/03/21
© Felix Miata
Felix's Home