tags:

views:

3467

answers:

7

Hi,

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;}
A: 

Try using jQuery's css rather than the Cufon.replace:

$('#header .lists li a').css({lineHeight: '120%', fontSize: '120%'});

Also, it may be an issue with the anchor's parents. Can you provide their css as well?

munch
NopeError: Cufon.replace("#header .lists li a").css is not a functionLine: 26
Efe Tuncel
@Efe You're doing it wrong.
Josh Stodola
+1  A: 

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

Josh Stodola
I did not check it in IE yet. I only looked at it in firefox.
Efe Tuncel
@Efe. The doc says the bug's in "All Browsers". I think that includes Firefox.
munch
@Josh: +1 for the link. You actually looked for it. I just assumed.
munch
on the website link you gave, it says "All browsers: line-height may not behave as expected under non-strict doctypes." How can I make strict (or HTML 5) doctype for line-height?
Efe Tuncel
You don't need to "make" a strict doctype. Just identify yourself like this (on line 1 [important] of the markup) `<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">`
Josh Stodola
A: 

Josh Stodola & munch

Thank you guys!

changing my doctype to the following fixed it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt; 
Efe Tuncel
A: 

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.

sweet_grass
A: 

The bottom padding solution worked perfectly for me - and no doctype change! Thanks very much!

Keith
A: 

Agreed... Don't change the DOCTYPE... SPANs within the element with bottom padding does the trick. Thank you "sweet_grass". Perfect solution.

Jeffry McGee
A: 

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

Silvan