Cufon rendering line breaks

Question

I have been using cufon for the last year and a half and have never seen this...

Say I have:

<h2 class="my_font">This is some text</h2>    
<p class="my_font">This is some more text</p>

The text is rendered properly but the line break gets rendered as a new line, for example:

<h2 class="my_font"><cufon class="cufon cufon-canvas" alt=" " style="width: 5px; height: 16px; ">...</cufon</h2>

<cufon class="cufon cufon-canvas" alt=" " style="width: 5px; height: 16px; ">...</cufon>

<p class="my_font"><cufon class="cufon cufon-canvas" alt=" " style="width: 5px; height: 16px; ">...</cufon</p>

So I end up with a 16px gap between the h2 and p tags. The only thing I have been able to do to prevent it is, put everything on the same line or comment out the line break:

<h2 class="my_font">This is some text</h2><!--    
--><p class="my_font">This is some more text</p>

Also, I think it's important to mention that this happens anywhere cufon is used, it's not isolated to the html example above. Any idea what could be causing this?

Thanks!

Answer 1

What does your Cufon.replace(''); code look like?

This can be caused by doing lazy replaces on large parent elements like this:

Cufon.replace('ul, div#foo');

Instead you should be more specific and target the specific elements inside the container, such as:

Cufon.replace('div#foo h2, div#foo span');

Perhaps that's not your issues but I've seen it happen before this way. Let me know.