Roman’s blog

Just upgraded to Wordpress 2.0.6 because of security issues. The upgrade was easy as always: Just copy the new files over the old ones, request an upgrade page, finished. Everything works as before: plugins, themes, etc. Fine piece of software.

Finally had some time for a new theme. I switched from the default Kubrick layout by tweaking the CSS and some of the PHP sources. I’m by no means a CSS expert but during the whole thing I learned quite a bit:

• Prefer paddings for spacing instead of margins especially for elements like headings and lists. Margins tend to obscure your layout since you can never be sure if a neighbour element’s margin pushes you around. Set 0px margins explicitely to avoid browser defaults.
• Don’t make something inline what is normally block (e.g. for preventing line-breaks between a heading and a smaller caption). This will catch you just behind the next corner.
• Beware of the IE “Double margin bug”. What a PITA, cost me an hour!
• Use floats for your sidebar, don’t do tables.
• Fonts have very different sizes for the same “Point size”. This is expressed by the so called aspect ratio. Problem should be solved by the font-size-adjust CSS property which unfortunately isn’t implemented across various browsers.
• The X11 base font equivalent to “Georgia” is “Utopia” not “Times New Roman”.
• Keep your CSS simple. Browser quirks WILL byte you. Restrain from dirty CSS hacks, even if they’re well documented.
• Use browsershots.org for cross-browser/cross-platform testing.

As for the layout itself: I switched to a serif font (Georgia) for readability reasons. Don’t use Times for this prupose as it renders badly on computer screens. The content area is now emphasized by having a dark surrounding. I used grey instead of pure black since latter would mean too high contrast and hurts the eye. Finally I streamlined the look for various pages. The main page, archives and detail page now all have a sidebar. This is for consistency, the original layout switched to a “wide-content” layout.