Unique Numbers in CSS

If you’ve been learning CSS and looking around people’s code all over the web, I’m sure you have found some strange numbers inside their CSS files, seemingly used out of the blue. This is the list of some of those numbers that I noticed, accompanied with some background information about it.

-9000px

This is the number originally used by Mike Rundle on his famous Phark image replacement technique. Another variation is -100em or -5000px or -9999px. Nevertheless, the idea is to apply a big, negative number to the CSS text-indent property, so that it puts the text way, way off of the screen, effectively hiding it. Combined by adding a background image of choice to the element, this gives the effect of having text inside the HTML structure, but shows an image instead.

HTML:

<h3>Revised Image Replacement</h3>

CSS:

h3 {
  text-indent: -9000px;
  overflow: hidden;
  background: url(image-to-show.png);
  height: 25px;
  }

Note: The usage of em causes some slight problem with old Version of Safari, so whenever possible (actually I can’t think of a situation when this isn’t possible) use px.

62.5%

This is the known number used for the base font size in browsers so that 1em equals 10px, mostly used in the practice of using em’s for setting font size yet still thinking in pixels to make things simpler. This method is first introduced and explained by Richard Rutter. The usage of em instead of pixel for font-size, of course, is good for many reasons, one of them is due to the fact that fonts set in px cannot be resized on a certain wretched browser. Back to this number, it is commonly used on the html element, for obvious reasons.

body {
  font-size:62.5%;
  }

A more advanced usage is 62.5%/1.6em, where the second number denotes the line height. This only works in font instead of font-size property:

body {
  font:62.5%/1.6em Arial, Helvetica, sans-serif;
  }

1%

This number, used on height property, is commonly used with the Holly Hack to fix the strange escaping floats bug in IE6. It is also featured on A List Apart’s 2004 article on creating horizontal drop down menu. Now if you’d excuse me, talking about IE bugs is obviously not my (or any other web designers’) happiest moment, so kindly peruse the links above to learn more about it.

101%

Like the number before it, 101% is also used on the height property. This is commonly used to deal with Firefox’s behavior of adding/hiding its vertical scrollbar depending on whether the page is taller than the viewport or not. This behavior gives the effect of inconsistencies between pages depending on their height. Using this technique, Firefox is forced to always display the scroll regardless of page height.

html {
  height: 101%;
  }

Nevertheless, it is said that this does not fix the same problem in Opera, and the more correct solution is this:

html {
  overflow-y: scroll;
  }

Another similar discussion about this can be found at Dzone Snippets.

Closing

These are what I can remember easily. It’s by no means a complete list, and I’d love to hear it if you know more about them!