Why do some links “wiggle” and dance when a cursor hovers over them? I used to think their parents never taught them not to fidget, but then I had some links of my own and realized some of my link parenting preconceptions were a bit off.
I had an odd little problem with my links today. While playing around with an actual links page that uses an unordered list to arrange links, I discovered the links wiggled when the cursor passed over them.
I didn’t like the effect but was sure I hadn’t done anything different to produce it. It happened in Safari and Firefox, but not I.E. Mac. I looked over my stylesheet for “hover” statements and could only find:
.post ul li:hover { padding: 0px; font-weight: normal;
This was my first time placing an unordered list of links within a post and the first time I noticed the wiggle, so I felt certain the problem was here somehow.
I didn’t want to delete the statements; perhaps they did something elsewhere I haven’t figured out yet! I Googled the subject instead, searching for html links hover “link moves” and found this page: Menu Design: CSS Rollovers
Big John wondered why the link moves, so he noodled around with the code til he figured that IE just doesn’t like the use of % for the padding. Change it to em or px, and the link stays put.
Even though the link movement didn’t seem to happen in I.E. Explorer, and even though the stylesheet wasn’t using % for the padding, I removed the whole “padding” line from the above bit of CSS, saved the stylesheet, and Presto! No more link movement.
Oh, I am so clever.