Whack-a-Mole Web development
My web design work is a bit like your playing whack-a-mole in the dark. Play long enough and you will get a mole. Meanwhile, you have whacked a bystander or two.
That analogy occurred to me in October 2022 as I updated this site’s formatting. I reviewed some pages still in my computer (not on the public site yet). I realized that I had, in effect, whacked a bystander a day earlier.
An enormous expanse of white space at the top of the page pushed down the menu bar nearly off the display. A quick look at some formats turned up nothing that would cause this. I was mystified.
I set about solving the mystery.
There are plenty of things I can no longer do with very poor eyesight. Driving a car for instance. And some people are discouraging me from using hammers, axes and chainsaws. Web formatting, however, is done entirely with plain text, which imposes no limitations for me. I can type that and hear it with my screen reader. Then, with some determination and creativity, I can make out the look of the finished page.
Solving the current mystery required some extra creativity since nothing at the top of the pages had incorrect format values for spacing.
First, I put a thick, black border around the menubar so I could easily see how it lined up with other page parts. Everything was fine, and I removed the border. I repeated this trick with other parts that normally are not visible to the user, and all was fine.
Finally, I applied my trick to the logo. Voilà! Here was the problem. The width of the logo was correct, but the height was much too tall.
The height should have been 130px but instead was 1300px.
I am blaming that typo on the arthritis in my fingers.
A mistake like that usually distorts an image severely and is immediately spotted. There was no such clue here because my logo uses the SVG format. This preserved the shape of the letters even with the wrong height. It just generated the white space under the letters.
I fixed the typo and my frustration faded. I smiled, satisfied that the mystery was solved. Then I looked around for bystanders in need of first aid.
Published: