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