Month: March 2002

Here’s a sneak peek of a problem I’m having with the site redesign in IE 6 on Windows. It works fine on the other browsers I’ve tried (mostly readable in NS 4, ugly in Mac iCab but that’s OK), but on IE 6 it starts doing funky things with border and text position. I’ve been over the stylesheet lots of times and can’t find the issue…. Interestingly it only does it on the second and subsequent news items.

I’m very taken with A List Apart. They really have the sweet spot between coding and development—and between what the CSS spec says and how it is implemented. One complaint: there’s a lot of value in their series on transitioning to CSS from older forms of design (tables), but it was written in 1999 and a lot of the practical issues they mention have evolved with Netscape and IE 6 on the table.

more…

I spent all yesterday (when I wasn’t in class) working on the CSS redesign of the site. I was about ready to give up on being able to view it in Netscape 4 until I found this site, which offers a free stylesheet for a fluid three-column layout (fluid meaning it resizes to fill the available browser width).

I had to tweak it a bit because of the Manila calendar. Manila automatically renders the calendar as a table, so it doesn’t resize. This is a problem with small browser width as it extends past the edge of the navigation div. I had to make the left navigation fixed width to solve the problem. This in turn meant the middle and right divs overlap at some smaller browser widths. I’ll do some work in 800×600 today to see if I can isolate the problem.

But most of the structural work is done. Now I can move on to aesthetics — colors, border widths, font leading — oh yeah, you can do leading, aka line height, in CSS. This old digital typographer is thrilled.

more…

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.

evolt.org: Kissing Print Versions of Pages Goodbye. CSS syntax for creating a special print style sheet. Interesting to see what level of browser support there is for this. (From mac.scripting.com.)

more…