Today’s CSS learnings

Working on the redesign in earnest today. I’m teaching myself CSS from trial and error and the specs, so I don’t have a lot of authority, but I thought I’d share what I’m learning anyway.

CSS Learning #1: When trying to display a border around a <div>, you must specify the border color, size, and style (or have specified them as a default somewhere) or the border will not display.

CSS Learning #2: CSS allows you to specify dimensions of elements in a number of ways, including ems (an em is approximately equal to the width of a capital letter M in the font being used). Distance measurements in ems are great when you’re just working with type. However, when mixing images (fixed size in pixels) and type, ems may cause problems. The cause: slightly differing type dimensions across platforms, or different fonts installed in the user’s system.

CSS Learning #3: Float is your friend. The float attribute of a <div> around an image allows you to wrap text around that image.

CSS from both sides of the fence

I’ve tried to stay out of the blogwar over using CSS vs. tables for web site design that has been brewing at Scripting News and other places, but I think it’s time to jump in. I’ll be working on a CSS-based redesign of this site over the next few weeks. I’ve noticed how slowly this page renders in Netscape 4.x (because of all the nested tables), and hopefully moving to CSS will either make things easier or convince the 4.x readers to move to more modern browsers (hi, Dad!).

Two quick resources to get started: Microsoft’s CSS node in the MSDN library, and Apple’s series on CSS in its developers’ site.