Cufon: links change size on hover and stay that way

Question

I have text links in a paragraph which is replaced using Cufon. For some reason, when I hover over the links, the text in them gets wider, and stays that way when I move the cursor away. A colour change, added to hover in the css, reverts as one would expect. So it isn't "stuck" in the hover state as far as I can tell.

When I turn javascript off, disabling cufon, there is only a color change change to the font on hover. With javascript off, the hover state works for colour, but it dosn't have the width problem.

This happens in IE6, 7 & 8, as well as Firefox, Safari and Chrome, which leads me to believe the problem is peculiar to how Cufon has been implemented on this site.

Anybody run into this before? I'd love an assist here, but if I find the cause, I'll post it back as an answer.

Unfortunately I can't post links or code due to an NDA.

Answer 1

Got it.

There was a section:

Cufon.defaultTextCufon = { fontFamily: 'Proprietary Font', hover: true, fontStretch: 'semi-condensed' }; Cufon.linkTextCufon = { fontFamily: 'Proprietary Font', hover: true };

I concluded that the issue was a result of the default text being condensed by default but not the links, which is why Cufon understandably gave counter-intuitive results, as a result of a counter-intuitive configuration.

I replaced it with:

Cufon.defaultTextCufon = { fontFamily: 'Proprietary Font', hover: true };

Cufon.linkTextCufon = { fontFamily: 'Proprietary Font', hover: true };

After this, all the font was in the (slightly) wider state by default. Another option would have been to append "fontStretch: 'semi-condensed'" to the decalration for link elements, but I actually find the site better matches the concept designs better now and is more readable, which is an unexpected bonus.

You may have guessed, I didn't implement the cufon on this site. Hopefully this page will save somebody else a headache.