release

The other day I suggested to Dineen that she have a professional web site apart from whatever her firm puts up. Smacking my forehead, I realized that I should do that as well.

So I did.

After the site was largely finished, I did a quick check on MSIE 5 on Dineen’s PC. Busted. DIV elements all over the place, seemingly at random.

Running the site through the CSS validator caught a couple of typos which fixed most of the problem. The header, though, was still a mess.

The header is a single DIV element, the whole width of the page. Inside the DIV are two child elements: a headline element for my name, and a DIV containing the photo. Both are floated left with appropriate margins.

I tried the box model hack for IE 5 and that helped a bit, but the headline was still out of place. Instead of resting nicely to the left of the image, it hung to the left and below the image, knocking the bottom of the box down in order to fit the additional line height.

Problem solved: in the source document, the DIV containing the image precedes the headline element. They were not that way in the stylesheet. Floating elements in a different order than they appear in the markup apparently confuses IE 5 as to where they should go. Reordering the stylesheet so that the floats occur in the same order fixed the problem. I know some web designers advocate using different orders in the stylesheet (I’ve seen at least one advocating an alphabetical order) but the use of floats would seem to dictate this method if you care about them working properly.

(Note: Safari, Firefox, and IE 6 for PC seemed to work just fine regardless of order.)