Cufon draws unnecessary spaces

Question

I have my website here - http://thezoomer.net/clubroyale/

if you look at the submenu from ABOUT US or at the CONTACT US menu item with Firebug, you will see Cufon draws unnecessary canvases.

Any idea ? Thanks!

Answer 1

A solution I found is to get rid of all whitespace in the HTML, so this:

<li class="dir nav-item"><a href="./">ABOUT US</a>
    <div class="subnav-con">
    <div class="nav-top">

    </div>
        <ul class="nav">
            <li class="nav-item"><a href="./">HISTORY</a></li>
            <li class="nav-item"><a href="./">VISION</a></li>
            <li class="dir nav-item"><a href="./">TEAM</a>
            </li>
            <li class="nav-item"><a href="./">CLIENTS</a></li>

            <li class="nav-item"><a href="./">TESTIMONIALS</a></li>

            <li class="nav-item"><a href="./">PRESS</a></li>
            <li class="nav-item"><a href="./">FAQ</a></li>
        </ul>
    <div class="nav-bottom"></div>
    </div>
    </li>

becomes this:

<li class="dir nav-item"><a href="./">ABOUT US</a><div class="subnav-con"><div class="nav-top"></div><ul class="nav"><li class="nav-item"><a href="./">HISTORY</a></li><li class="nav-item"><a href="./">VISION</a></li><li class="dir nav-item"><a href="./">TEAM</a></li><li class="nav-item"><a href="./">CLIENTS</a></li><li class="nav-item"><a href="./">TESTIMONIALS</a></li><li class="nav-item"><a href="./">PRESS</a></li><li class="nav-item"><a href="./">FAQ</a></li></ul><div class="nav-bottom"></div></div></li>

There's possibly a neater way involving CSS, but I'm not going to look for it unless you really want me to.