Are there any tools/Firefox plugins that will allow you to drag elements (divs, images etc) about on the page, and tell you the amount (x, y) that you have moved it? It would speed up designing a page a lot, instead of tweak css, reload page, tweak css, reload page.
I've found the Firefox Web Developer extension useful for editing the css live, but it seems to hide background images when used.
A trick I use is...
Do the html/css on your regular text editor on one monitor, and use setTimeout(function(){ location.reload() }, 30000 ); to automatically refresh your browser in the other.
If you're on linux you can probably setup a script to watch whenever you "save" file(s) in your css directory so when they are actually saved, bind it to the browser and refresh the tab , though I haven't really done that yet.
I'm not sure if the Firefox extension "Browser Turns Editor" is quite what you're looking for, but it might be. I guess you would have to edit the page in design mode and then inspect parts of it in Firebug, to see what the corresponding HTML is. Or something like that.