Jump to content
UncleStef Mentoring Update: New SEO course!

CUFON extra space

jbwebdesign

By jbwebdesign
in Javascript

 Share

Recommended Posts

jbwebdesign Newbie

jbwebdesign

Posted
Posted (edited)

Hello everyone, I am working on a website using cufon and i seem to be having a problem with an extra space rendered by cufon.

 

Does anyone know how to fix this?

 

Cufon adds this extra line of code which i don't want:

 

<cufon class="cufon cufon-canvas" alt=" " style="width: 5px; height: 15px; "><canvas width="20" height="19" style="width: 20px; height: 19px; top: -2px; left: -1px; "></canvas><cufontext> </cufontext></cufon>

 

everything else renders properly.....

 

here is my HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Company Name</title>
<link href="reset.css" rel="stylesheet" type="text/css" />
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/cufon.js" type="text/javascript"></script>
<script src="js/Trebuchet_MS_400-Trebuchet_MS_700-Trebuchet_MS_italic_400.font.js" type="text/javascript"></script><script type="text/javascript">
Cufon.replace("#mainnav");
Cufon.replace(".gridX2");
Cufon.replace(".gridX3");	
</script>
</head>

<body>
<!--We need this for head wrap -->
<div id="headwrap"></div>

<div id="container">
<div id="header">
   	<div class="gridX2">
       <div id="logo">
       	<h2><a href="#">Company Name</a></h2>
           <h3><a href="#">1234 dummy rd. Suite 201 Dummy NY 10003</a></h3>
       </div><!--End Logo -->
       </div><!--End Grid %50 of width -->

       <div class="gridX2">
       	<div id="headerUL">
           <ul>
           	<li>Phone: (555) 555-<span>LAW1</span>   (555) 555-5555</li>
               <li>Fax: (555) 555-<span>LAW2</span>   (555) 555-5555</li>
           </ul>
       	</div><!--End Header UL -->
       </div><!--End Grid %50 of width -->

       <div class="gridFull">
       	<div id="mainnavheadwrap"></div><!--We need this for nav head wrap-->
       	<div id="mainnav">
           	<ul>
               	<li><a href="#">HOME</a></li>
                   <li class="active"><a href="#">ABOUT</a></li>
                   <li><a href="#">SERVICES</a></li>
                   <li><a href="#">RESOURCES</a></li>
                   <li><a href="#">CONTACT</a></li>
               </ul>
           </div>
       </div><!--End Grid %100 Full width -->


   </div><!--End Header -->

   <div id="primary_content">

       <div class="gridFull">

           <div class="gridX3">
           	<div class="widget">
               	<h2>Terms And Conditions</h2>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut est lectus, bibendum eu vestibulum nec, vulputate quis sem. Vivamus nunc neque, auctor non ultricies in, gravida tincidunt massa. Duis eu volutpat ipsum. Sed ultricies dictum nulla.</p>
                   <p class="right"><a href="#" class="btn">READ MORE</a></p>
                   <div class="clear"></div><!--End Clear Fix -->
               </div><!--End Widget -->

           </div><!--End Grid %33.3 width -->

           <div class="gridX3 middle">
           	<div class="widget">
               	<h2>Contractual Agreements</h2>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut est lectus, bibendum eu vestibulum nec, vulputate quis sem. Vivamus nunc neque, auctor non ultricies in, gravida tincidunt massa. Duis eu volutpat ipsum. Sed ultricies dictum nulla.</p>
                   <p class="right"><a href="#" class="btn">READ MORE</a></p>
                   <div class="clear"></div><!--End Clear Fix -->
               </div><!--End Widget -->

           </div><!--End Grid %33.3 width -->

           <div class="gridX3">
           	<div class="widget">
               	<h2>Raise Capital For Your Entity</h2>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut est lectus, bibendum eu vestibulum nec, vulputate quis sem. Vivamus nunc neque, auctor non ultricies in, gravida tincidunt massa. Duis eu volutpat ipsum. Sed ultricies dictum nulla.</p>
                   <p class="right"><a href="#" class="btn">READ MORE</a></p>
                   <div class="clear"></div><!--End Clear Fix -->
               </div><!--End Widget -->

           </div><!--End Grid %33.3 width -->

           <div class="gridX3">
           	<div class="widget">
               	<h2>Jane Doe, ESQ.</h2>
                   <h3>Corporate Attorney</h3>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut est lectus, bibendum eu vestibulum nec, vulputate quis sem. Vivamus nunc neque, auctor non ultricies in, gravida tincidunt massa. Duis eu volutpat ipsum. Sed ultricies dictum nulla.</p>
                   <p class="right"><a href="#" class="btn">READ MORE</a></p>
                   <div class="clear"></div><!--End Clear Fix -->
               </div><!--End Widget -->

           </div><!--End Grid %33.3 width -->

           <div class="gridX3 middle">
           	<div class="widget">
               	<h2>Jane Doe, ESQ.</h2>
                   <h3>Corporate Attorney</h3>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut est lectus, bibendum eu vestibulum nec, vulputate quis sem. Vivamus nunc neque, auctor non ultricies in, gravida tincidunt massa. Duis eu volutpat ipsum. Sed ultricies dictum nulla.</p>
                   <p class="right"><a href="#" class="btn">READ MORE</a></p>
                   <div class="clear"></div><!--End Clear Fix -->
               </div><!--End Widget -->

           </div><!--End Grid %33.3 width -->

           <div class="gridX3">
           	<div class="widget">
               	<h2>Jane Doe, ESQ.</h2>
                   <h3>Corporate Attorney</h3>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut est lectus, bibendum eu vestibulum nec, vulputate quis sem. Vivamus nunc neque, auctor non ultricies in, gravida tincidunt massa. Duis eu volutpat ipsum. Sed ultricies dictum nulla.</p>
                   <p class="right"><a href="#" class="btn">READ MORE</a></p>
                   <div class="clear"></div><!--End Clear Fix -->
               </div><!--End Widget -->

           </div><!--End Grid %33.3 width -->


       </div><!--End Grid %100 Full Width -->

       <div class="clear"></div><!--End Clear Fix -->

   </div><!-- End Primary Content -->


   <div class="clear"></div><!--End Clear Fix -->

</div><!--End Container-->

<div id="footer">
<div id="gridwrap">
   <div class="gridX2">
   	<p>COPYRIGHT © 2012 company name. ALL RIGHTS RESERVED</p>
       <div class="clear"></div><!--End Clear Fix -->
   </div><!-- End Grid %50 width -->

   <div class="gridX2">
   	<div class="right">
       <ul>
       	<li><a href="#">HOME</a></li>
           <li><a href="#">ABOUT</a></li>
           <li><a href="#">SERVICES</a></li>
           <li><a href="#">RESOURCES</a></li>
           <li><a href="#">CONTACT</a></li>
       </ul>
       </div>
       <div class="clear"></div><!--End Clear Fix -->
   </div><!-- End Grid %50 width -->

   <div class="clear"></div><!--End Clear Fix -->
   </div><!--End Grid Wrap-->

<div class="clear"></div><!--End Clear Fix -->
</div><!-- End Footer -->

</body>
</html>

Edited by jbwebdesign
Link to comment
Share on other sites
jbwebdesign Newbie

jbwebdesign

Posted
  • Author
Posted

Never mind, i found my problem! :clap:

 

it turns out that since i am using Cufon.replace for the (".gridX3") i can't have white spaces in the HTML coding itself.

 

my new code looks like this:

<div class="gridX3"><div class="widget"><h2>Jane Doe, ESQ.</h2><h3>Corporate Attorney</h3>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut est lectus, bibendum eu vestibulum nec, vulputate quis sem. Vivamus nunc neque, auctor non ultricies in, gravida tincidunt massa. Duis eu volutpat ipsum. Sed ultricies dictum nulla.</p>
                   <p class="right"><a href="#" class="btn">READ MORE</a></p>
                   <div class="clear"></div><!--End Clear Fix -->
               </div><!--End Widget -->

           </div><!--End Grid %33.3 width -->

 

instead of this:

 

<div class="gridX3">
           	<div class="widget">
               	<h2>Jane Doe, ESQ.</h2>
                   <h3>Corporate Attorney</h3>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut est lectus, bibendum eu vestibulum nec, vulputate quis sem. Vivamus nunc neque, auctor non ultricies in, gravida tincidunt massa. Duis eu volutpat ipsum. Sed ultricies dictum nulla.</p>
                   <p class="right"><a href="#" class="btn">READ MORE</a></p>
                   <div class="clear"></div><!--End Clear Fix -->
               </div><!--End Widget -->

           </div><!--End Grid %33.3 width -->

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing
×
×
  • Create New...