views:

193

answers:

0

You can see this problem for a while at:

http://www.hopplayground.com/

I'm trying to display a cufon headline and nav system. The font I'm using is a little too widely kerned, so I'm trying to push the letters closer together with letter-spacing in the CSS:

    h1, h2, h3 {
 margin: 0;
 padding: 0;
 font-family: "DIN 1451 Std", Trebuchet, Verdana, Arial, sans-serif;
 /* letter-spacing: -.05em;  */
 font-weight: normal;
 text-transform: uppercase;
 display: inline;
}

And

<script src="/js/DIN_1451_Std_400-DIN_1451_Std_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
 Cufon.replace('h1');
</script>

When you roll over, the headline should go white from grey and back again. But in Safari, there's a little bit of residual white left when you roll off. I think it's caused by the letter spacing causing the cufon bounding box to be miscalculated. But you tell me: how can I fix this?

TTFN Travis