It’s amazing what you can learn in the doctor’s waiting room.

Nate was playing with the big toy – the one where you move all the beads back and forth across the wires – and I took a minute to check out a web design question I had, surfing the web on my phone.

I stumbled across this CSS tip for styling buttons… and, as it turns out, everything else.

I’ve been out of the loop on cutting-edge web design techniques, so I didn’t know you could now do rounded corners and drop shadows in CSS. And, as it turns out, you can use these techniques on more than just buttons.

You can style any element this way. Even block quotes. Or paragraphs. Heck, you could probably style a <span> this way.

And that’s pretty cool.

I didn’t take part in the CSS Reboot but I was inspired by it.

A couple of weeks of fumbling, and I’m still at nothing. So I’ve decided to start over with a new theme as a base – complete with trendy chunky footer – and then give it a new skin.

I’m probably going to draw the visual elements mainly from our recent bedroom makeover (especially the colors).

At this rate, it’ll take me another couple of months. Bear with me.

(And oh, yes, I’m well aware that the white-on-black color scheme is horrible. Again, bear with me.)

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.)