Fixin's

You spill out all of your creative talent on a new Web page and after a while you just cannot stand not knowing any more. And so, with just a hint of trepidation, you hit your [F12] key to show the results in a real browser on the real Internet... and it looks awful. What do you do, at that point?

This is a question I seem to get the most. Well, this or some variation of it. How do you fix things? Okay, I took the training. I read the Google links. I looked it up in the book. Then I put down my best first effort and gave it a shot and came up short. Now what?

Validate your page first, of course. But suppose it’s not a syntax error you are hunting, but some weakness in your understanding of, say, Cascading StyleSheets?

When I was learning to fly, I had a Hell of a time learning to land, which is one of the skills you really want to become good at. I had a wonderfully patient flight instructor, though and he gave me the key: Try, as much as is possible, to always do the same things, and do them at the same time. I used to take off at 90 miles per hour the first time, and 110 miles per hour the next. Sometimes, I would climb to eight hundred feet before turning, other times, I would climb up to twelve hundred feet. Sometimes, I would turn toward the runway when I was a quarter mile from the end and other times, I would find myself half a mile away. And when I would turn onto my final approach, sometimes I would fly at 85 miles per hour and other times at 75 miles per hour. Sometimes I’d have the engine at idle and other times I’d be turning 1500rpm.

Every landing was different for me, because every landing was different. I never did the same thing the same way twice in a row, so who is surprised that each landing was a new adventure? Once I learned to always take off at 90mph and to always climb out at the same speed and always make my first turn at the same altitude and always reduce my speed abeam the same location on the runway, and so on, everything came together for me. You reduce your workload and get everything done early so you can more easily manage the fewer variables that have changed since the last time. You end up on Final approach with more or less the same “picture” out the window every time because you’re always more or less at the same place with the same airplane as you had last time. You’re not suddenly having to slow down, or account for a changing cross wind. And if you do have to account for those changes, those are the only changes you have to deal with.

Manage your variables is the lesson. Don’t change seven things and then check your pages, change one thing and check your pages. Work it out in your mind… what is it, specifically, you expect to see? And what are the differences between what you expect and what you get? Change one thing and you can immediately see the results of that change. But if you change nine things you may have a more difficult time seeing the effects of an individual adjustment. This is especially true when you are dealing with margins and paddings in CSS.

I am a big fan of putting a box around it, whatever “it” is that you’re working on, to help you to see what is actually happening on a page. Quite often there is a big difference between what you expect, what you think is happening and what is actually going on. You want to adjust the space between “this” and “that”? Draw a box around either element and then start making adjustments—just remember the border itself needs to be accounted for in that space. If you don’t declare a border, there won’t be one, of course. But if you do declare even a one-pixel border around an element, you will be placing two pixels in either the horizontal or vertical space you are working in. Remember that.

Work slowly, deliberately. Make a change, anticipate what it will do, and then check the results. Once you have the effect you wanted to achieve, or are happy with an accidental discovery, then move on to make other changes. And keep learning. Eventually, you will find that what you expect to see and what you actually get are more and more often the same. Then maybe you can back off a notch or two and only check every two or three changes. But if you’re surprised again, go back to the last time you weren’t and do the single-change thing again, stepping through the process until it all works.