Problema con PNGFix, background-image estilo sprite estirada

Mr_Raymon · #1 (**permalink**) 27/12/2009, 04:24

Tengo un problema con PNGFix.

Tengo dos imagenes creadas al estilo Sprite (un logotipo y un menu). Las dos imagenes estan en CSS como background-image.

El problema es que se ven las imagenes estiradas con los estados dibujados (en caso del logotipo son 2 estados y el menu son 3).

¿Como puedo solucionarlo?

Saludos y Gracias.

jomaruro · #2 (**permalink**) 27/12/2009, 09:28

Hola:

Sería conveniente que indicaras tu URL o, si no la tienes, poner tu código para poder ver dónde está el error.

Saludos.

Mr_Raymon · #3 (**permalink**) 27/12/2009, 13:26

Pongo parte del codigo HTML

Código:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Proyecto Web - Inicio</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css"/>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.curvycorners.packed.js"></script>
<!--[if IE 6]>
<script type="text/javascript" src="js/jquery.pngFix.js"></script>
<script type="text/javascript" src="js/png_ie.js"></script>
<![endif]-->
<script type="text/javascript" src="js/funciones.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/CPMono_v07_Bold_307.font.js"></script>
<script type="text/javascript">
Cufon.replace('h2');
Cufon.replace('h3 a',{hover:true});
Cufon.replace('h3');
Cufon.replace('h3 span');
Cufon.replace('h4');
Cufon.replace('#menu_principal a',{hover:true});
</script>
</head>

Ahora parte del codigo CSS

Código:

#logotipo {
	width:405px;
	height:212px;
	float:left;
}

#logotipo a {
	background:url(../img/web/logotipo.png) no-repeat;
	width:405px;
	height:212px;
	text-indent:-9999px;
	display:block;
}

#logotipo a:hover {
	background:url(../img/web/logotipo.png) no-repeat -405px 0;
}

#menu_principal {
	background:url(../img/web/menu.png) no-repeat top;
	width:951px;
	height:42px;
	float:left;
	margin:25px 8px 35px;
	position:relative;
	z-index:100;
}

jomaruro · #4 (**permalink**) 27/12/2009, 14:13

Hola:

¡Fantástico! Eso y no poner nada es lo mismo.

Saludos.

Mr_Raymon · #5 (**permalink**) 28/12/2009, 03:40

Ya he descubierto el problema. Este plugin en concreto deforma la imagen al tamaño del divisor. De hecho esto es lo que pone en la web: •works now also with CSS-Backgrounds (but scaling backgrounds).

Tendre que buscar otro metodo para hacerlo funcionar.

Saludos.

jomaruro · #6 (**permalink**) 29/12/2009, 16:36

Hola:

Está muy bien eso de aportar la solución cuando la encuentra uno mismo.

Saludos.