CODEWITHSUNDEEP
jquerycssfonts
Efe Tuncel
Efe Tuncel

Reputation: 211

Cufon line-height problem

When I apply line-height in CSS or in javascript, it does not do it. And if I apply in the script, I get the following error.

Error: missing : after property id
Line: 26, Column: 44
Source Code:
Cufon.replace('#header .lists li a', {line-height: '120%;', font-size: '120%'});

javascript

$(document).ready(function() 
{

    Cufon.replace('#header .lists li a', {line-height: '120%;', font-size: '120%'});

});

style.css

#header .lists { float:left; position:relative; width:776px; height:40px; list-style:none; padding:0; margin:0; margin-top:1px; background:url(../images/bg_mainmenu_off.gif); z-index:100; }
#header .lists li {float:left; height:40px; display:inline; background:url(../images/bg_mainmenu_off.gif) repeat-x;}
#header .lists li a {display:block; width:150px; height:40px; line-height:40px; text-decoration:none; font-size:16px; font-weight:bold; text-indent:10px; font-weight:bold; color:#FFFFFF; margin: 0px; }
#header .lists li a:hover { background:url(../images/bg_mainmenu_on.gif) repeat-x; }
#header .lists div {display:none; }
#header .lists :hover div {display:block; position:absolute; background:#FFFFFF; top:26px; border:1px solid #ece7d1; padding-bottom:10px;}
#header .lists :hover div dl { float:left; width:179px; display:inline; padding:5px; margin:0 5px 10px 5px;}
#header .lists :hover div dl dt { width:179px; height:16px; background:#b39f87; margin:5px 0 10px 0; text-decoration:none; }
#header .lists :hover div dl dd {padding:0; margin:0;}
#header .lists :hover div dt a { display:block; height:14px; line-height:14px; font-size:14px; color:#FFFFFF; font-weight:bold; text-decoration:none;}
#header .lists :hover div dt a:hover { background:none;}
#header .lists :hover div dd a { display:block; height:14px; line-height:14px; font-size:14px; color:#b39f87; font-weight:normal; text-decoration:none; }
#header .lists :hover div dd a:hover {text-decoration:underline; background:none;}

Upvotes: 11

Views: 33588

Answers (9)

user3151705
user3151705

Reputation: 11

For line-height to work with Cufon, you need to change the above into the Strict DOCTYPE

Visit:http://xsdesigns.se/2012/08/not-just-seo-but-a-little-bit-of-coding-tips-as-well-cufon-fonts-and-line-height-problem-fix/

Upvotes: 1

Sedat Kumcu
Sedat Kumcu

Reputation: 2440

I've solved the problem as follows. Cufon creates <cufon> tags at document ready. I define a CSS style like this in my .css document. (my cufon Text in the .HeaderArea class)

.HeaderArea cufon { margin-bottom:10px; }

Upvotes: 1

Jeroen
Jeroen

Reputation: 11

For the people who are still looking for an answer.
Every word is separated by Cufon in block elements

So try this:

.yourCufonDiv .cufon-canvas {margin-bottom:5px;}

Upvotes: 1

popware
popware

Reputation: 11

This works for me:

## main-content .cufon-canvas {height: 25px !important;}

Upvotes: 1

Michael Giovanni Pumo
Michael Giovanni Pumo

Reputation: 14784

I know I might be a little late to the cufon party, but I read some of the solutions using margin, above. I tried this, but in my case, I needed a "tighter" line-height. I tried a negative value but it still didn't work. I figured out that you need to display the cufon generated tag's to block.

Here's a code snippet:

.myClass cufon { display: block; float: left; margin-top: -3px!important; }

This seems to work a treat.

Good luck out there. It's a dangerous world.

Upvotes: 1

The coder of salvation
The coder of salvation

Reputation: 11

I can't help to mention:

{line-height: '120%;',

you might want to change this into:

{'line-height': '120%',

since javascript parsers might break on the '-' operator..

Upvotes: 1

Silvan
Silvan

Reputation: 156

Also the following CSS styling worked for me without Doctype change (like the post from Keith before)

div#navigation ul li cufon {
    padding-bottom: 3px;
}

Cheers

Upvotes: 10

sweet_grass
sweet_grass

Reputation: 21

One solution we (@markedup actually) have found is to wrap a span around the text inside the element you are having issues with, so:

<h1><span>Some text here that is giving you a bit of a headache</span></h1>

Add bottom padding on the child span and bob's your mothers brother.

Uses a bit of extra code but better than specifying the wrong doctype, resulting in potential invalid pages and b0rked css.

Cheers.

Upvotes: 2

Josh Stodola
Josh Stodola

Reputation: 82513

There is a known bug in Cufon that will probably not be fixed regarding flaky line-height recognition on pages with non-strict doctypes.

Upvotes: 12

Related Questions