Dead leading and link flicker

20081210619

Inline links have this nasty habit of not retaining their clickable area through the lines’ leading. Moving your mouse over the lines you get the familiar hand cursor while over the link text, then the default cursor in the leading and back to the hand once the next line is reached. The visual grossness is exaggerated when the link has a hover style applied to it to change color or add an underline. The real annoyance is having to click twice due to missing the target area the first try.

There are two ways to make the clickable area fill the leading. The first is to make the link display as a block element. The problem with this is now the link will be as wide as its container unless a width is explicitly declared. This is not always the best for usability as it can result in an otherwise empty area becoming a link.

The second is to add a pinch of top and bottom padding to the link. Because the link is inline, the padding does not change the layout. Rather, it bleeds over itself. Use ems for the unit and it scales with the user’s text size preference. Dead leading be gone.

Sure, there are probably a 100 other ways to handle it. CSS tends to be like that. Example.


Skateboards and bikes are better at nights

Skateboards and bikes are better at nights. 0 comments.


Search WayTooCrowded
The Header Should Always Point Home