Greetings folks,

There seems to be an odd problem with Chrome / Cufon js. Cufon works fine in IE and Firefox, but Chrome is for whatever reason top aligning (vertically) the menu text.

Odd enough, when you load the page, it shows you the text align and quickly top aligned when the cufon js kicks in (happens rapidly but obviously cufon causing this).

It also only happens inside the billing portal strange enough. It uses smarty templates and I've wrapped the scripts in {literal}{/literal} code.

The header template is this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="content-type" content="text/html; charset={$charset}" />
<title>{$companyname} - {$pagetitle}{if $kbarticle.title} - {$kbarticle.title}{/if}</title>
{if $systemurl}<base href="{$systemurl}" />
	<link rel="stylesheet" type="text/css" href="templates/{$template}/style.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="/style.css" />
	<!--[if IE 7]>
		<link rel="stylesheet" type="text/css" media="screen" href="/code/css/ie.css" />
	<link rel="shortcut icon" href="" />		
{if $livehelpjs}{$livehelpjs}
	<!-- jQuery Script -->
	<script type="text/javascript" src="/code/js/jquery-1.4.2.min.js"></script>
	<!-- Cufon Script -->
	<script type="text/javascript" src="/code/js/cufon-yui.js"></script>	
	<script type="text/javascript" src="/code/js/nevis_700.font.js"></script>
	<script type="text/javascript" src="/code/js/cufon.js"></script>
	<script type="text/javascript" src="/code/js/OfficinaSerITCStd_Medium_italic_750.font.js"></script>
	<!-- Dropdown Menu -->
	<script type="text/javascript" src="/code/js/hoverIntent.js"></script>
	<script type="text/javascript" src="/code/js/superfish.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#header ul li ul li:odd").css("background-color", "#37393d");	
			$('#header ul').superfish({
				delay: 200

Keep in mind it works fine in FF and IE.

You can test the working version here:

The menu is the sub-menu with "reseller hosting" highlighted in red bg. That's the one I'm referring to. Attached is the problem in Chrome, within the billing portal.

Recommended Answers

All 2 Replies

Hmm... Did you check the elements' attributes after they are rendered? Chrome may have a certain different attributes in box rendering model that Cufon does not support. You may check only the elements that wrongly render. Just my two cents.

Would appreciate help on this please.

Taywin, not sure what you mean. They look similar in Chrome and Firefox for example, so not sure.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.