The theme used for this site is based on Unlimited 1.0, by Sadish Bala. I licensed the Unlimited 1.0 theme for $20 and then began modifying it, mostly by changing the style sheet and providing a new logo image.

Today I discovered that the theme did not handle font-resizing well. For example, a Firefox user on a Mac OS X computer can use command-+ to increase the size of the fonts on a web page. I find that when my eyes get tired, the easiest way to ease them is to enlarge the fonts on the computer screen.

The Unlimited 1.0 theme was designed to use a static width of 900px. When the user enlarges fonts on a static-width page, the structure of the page begins to break down as the browser attempts to render the larger text in an unchanging region. The solution to this problem is to build flexibility into the web page so that when the user enlarges the font, the page is also enlarged to make more room. The way this is done is to specify widths of div elements using em units instead of px units. One em unit corresponds to the height of the letters of the font, so when the size of the font increases, the length of one em also increases, and as a consequence the width of the div element also increases.

I changed the width of the entire page to 70em, with the left column set to 52em total width and the right column to 18em total width. I also fixed minor problems with the menu and footer so that they would resize themselves, too.

If you care to experiment with a standards-compliant browser such as Firefox 2.0 or Safari 3.0, you will see that the web pages for my blog now resize nicely when you make the fonts larger or smaller.

I am also finicky about compliance with XHTML standards, and I discovered that the Links widget provided with WordPress creates multiple li elements with the same ID when you have more than one category in your blogroll. I replaced that widget with the LinkBlock plugin written by M. Holger. The LinkBlock plugin allows you to create up to nine blogroll-style widgets in your sidebar. I needed this because I have a blogroll, a podcast roll, and a website roll. The LinkBlock plugin handles the IDs correctly so that an XHTML validator does not complain.

Everyone knows that there are three generic font families that can be used in CSS, serif, sans-serif, and monospace. What I learned today is that there are two more generic font families, cursive and fantasy. This is what these look like:

font-family: cursive
Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam…

font-family: fantasy
Lorem ipsum, dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam…

A note: CSS, The Definitive Guide, 3rd Edition, by Eric A. Meyer, was published in November, 2006. My experience with buying O’Reilly books is that as soon as I buy one, a new edition is released one or two months later.

Note added on March 4, 2008:

On my Mac OS X computer, the paragraph styled with the cursive font is displayed using Apple Chancery by both Firefox 2.0.0.12 and Safari 3.0.4. (Apple Chancery is the font I used to create the logo for this site.) The paragraph styled with the fantasy font is displayed using Papyrus.

Under Windows XP, the results are different. Firefox 2.0.0.12 uses Comic Sans MS for cursive and Calibri for fantasy. Internet Explorer 6.0.2900 also uses Comic Sans MS for cursive but Algerian, an all upper-case font, for fantasy.

I expect other variations for browsers under Windows Vista and Linux.