Problema de línea de altura de Cufon

Cuando aplico altura de línea en CSS o en javascript, no lo hace. Y si solicito el guión, aparece el siguiente error.Problema de línea de altura de Cufon

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

Fuente

2010-01-18 Efe Tuncel

el tamaño de la fuente se ha cambiado con el siguiente código, pero la altura de la línea todavía no se ha modificado. Cufon.replace ('# header .lists li a', {lineHeight: '12px', fontSize: '12px'}); –

Aquí está la solución para la altura de la línea de cufon :: http://www.xpertdeveloper.com/2012/10/cufon-line-height-problem/ – Avinash

Hay una known bug in Cufon that will probably not be fixed con respecto al reconocimiento escamosa línea de altura en las páginas con doctypes no estrictas.

Fuente

2010-01-18 20:14:29

No lo he comprobado en IE todavía. Solo lo miré en Firefox. –

@Efe. El doc dice que el error está en "Todos los navegadores". Creo que eso incluye a Firefox. – munch

@Josh: +1 para el enlace. Usted realmente lo buscó. Solo asumí. – munch

Una solución que (@markedup en realidad) hemos encontrado es para envolver un lapso de alrededor del texto dentro del elemento que está teniendo problemas con, por lo que:

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

agregar relleno de fondo en el lapso de niños y de la sacudida sus madres hermano.

Utiliza un poco de código adicional, pero es mejor que especificar el tipo de documento incorrecto, lo que da como resultado posibles páginas no válidas y css corregidos.

Saludos.

Fuente

2010-03-04 12:22:24

también los siguientes estilos CSS trabajó para mí sin cambios Doctype (como el puesto de Keith antes)

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

Saludos

Fuente

2010-08-19 12:22:36 Silvan

El más simple de todos a partir de ahora. O 'div # navigation ul li .cufon' (observe el selector de clases), si quiere ser un poco más compatible. –

Por alguna razón necesito usar relleno en lugar de amortiguación para que funcione. Pero esta solución funciona a la perfección. –

no puedo dejar de mencionar:

{line-height: '120%;',

Es posible que desee cambiar esto en:

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

ya que los analizadores de JavaScript pueden romperse en el operador '-' ..

Fuente

2011-06-14 12:14:50

He resuelto el problema de la siguiente manera. Cufon crea etiquetas <cufon> en el documento listo. Defino un estilo CSS como este en mi documento .css. (Mi Cufon texto en la clase .HeaderArea)

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

Fuente

2011-07-07 11:26:34

Sé que podría ser un poco tarde a la fiesta Cufon, pero he leído algunas de las soluciones utilizando márgenes, arriba. Intenté esto, pero en mi caso, necesitaba una altura de línea "más apretada". Probé un valor negativo, pero aún así no funcionó. Descubrí que necesitas mostrar las etiquetas generadas por cufon para bloquear.

He aquí un fragmento de código:

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

Esto parece funcionar un convite.

Buena suerte por ahí. Es un mundo peligroso.

Fuente

2011-07-13 16:55:26

Esto funciona para mí:

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

Fuente

2012-01-24 12:00:45 popware

Para las personas que todavía están en busca de una respuesta.
Cada palabra se separa por Cufon en elementos de bloque

Así que trate esto:

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

Fuente

2012-11-05 14:25:48 Jeroen

Para line-height trabajar con Cufon, es necesario cambiar lo anterior en el DOCTYPE estricto

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

Fuente

2014-01-06 19:59:12 user3151705

Problema de línea de altura de Cufon

Respuesta

Cuestiones relacionadas