title: Cufon causing gap in drop down menu
body: <p>I'm stuck on a problem with the drop down menu on this site <a href="http://www.leithonthefringe.com/" rel="nofollow">http://www.leithonthefringe.com/</a> (hover over performer information to see problem). </p>
  
  <p>Basically a large gap appears between the main menu and the first item in the drop down, it affects FF/IE/Chrome.</p>
  
  <p>Any thoughts greatly appreciated!</p>
  
  <p>CSS is as follows:</p>
  
  <pre><code>#menu-main-nav {    margin: 0px; padding: 0px; }
  #menu-main-nav li { float: left; list-style: none; height: 40px; font-size: 20px; }
  #menu-main-nav li a { display: block; background: #333333; padding: 12px 24px 8px 24px; text-decoration: none; border-right: 1px solid #444444; color: #EAFFED; white-space: nowrap; }
  #menu-main-nav li a:hover { background: #222222; }
  #menu-main-nav li ul {  margin: 0px; padding: 0px; height: 40px; position: absolute; visibility: hidden; border-top: 1px solid white; z-index: +1 }
  #menu-main-nav li ul li { float: none; display: inline; }
  #menu-main-nav li ul li a { width: auto; background: #750000; color: #FFFFFF; border-right: none;  }
  #menu-main-nav li ul li a:hover { background: #8d0101; }
  </code></pre>
  
  <p>//Update</p>
  
  <p>The problem seems to be cufon rendering a white space that doesn't seem to exist as cufon text - any thoughts on why that would happen also appreciated.</p>
  
  <p>The solution turned out to be to render cufon on #main-menu-nav a rather than #main-menu-nav... </p>