There's nothing like crossing off bug fixes from your to-do list is there. Those little annoyances that don't really warrant your immediate attention and so get forgotten about. It's like exorcising demons from your website and feels really good.

Yesterday I was talking about how it's easy to ignore bugs with your personal sites until the umpteenth person tells you to fix it. Then Ian B chips in (pun intended) as the first person to point out a bug on my "gallery" site that's been on the old to-do list for a while. Below each photo is an paragraph or two about the shot. If they contained links they were sometimes impossible to click. In working out the problem I had another reminder of what a good bad developer I can be.

Here's an example of the problem. Hover over the links in the paragraph below. Notice how the link on the bottom line is ok but the link early on in the text is virtually "unclickable".

If it weren't for the fact it happens in most browsers I would have assumed it was a bug. Instead I attacked the problem as though it were my fault. First I added a background colour to the text to highlight the problem. This made it obvious there was a problem, as below:

Notice how each line overlaps the one above? The reason for this is the following piece of dodgy CSS:

Remove the padding and the links work ok. But that doesn't address the real problem. The problem is my use of a <span> element. Spans are in-line elements. The padding setting applies to the whole line! What I wanted was a block of text that had a 12 pixel space above it. What I should have used it is a block-level element, like a <div>, and given it a top margin of 10px.

Remember me talking about in-line elements before? Yet again the lesson is to be careful when you use CSS. Not only CSS, but HTML. It's worth knowing when and where to use which elements. I make no excuses for the fact that I got it very wrong in this case.