Question

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.

Answer 1

Here is what I use related to your question:

• MeasureIt Firefox extension to measure pixels on viewport

• Firebug 1.5 and its HTML / right-handed half / Appearance. It’s useful as is AND it’s editable.
  Obviously, I also use a lot the Style pane. Click on the left of an instruction to disable it temporarily; right-click to add inline CSS for this element selected in the HTML on the left-hand half window; the small triangle close to style can show you the System CSS (default rules)

• Pixel Perfect is a Firebug add-on that overlays a PNG over your page, for comparison and alignment purposes.
  Don’t go the pixel-freak route if your HTML/CSS work is 1px off your design though 🙂

• Firediff is also a Firebug add-on that tracks changes done in Firebug. It logs everything you’ll do in the HTML pane (great) but also your brief use of the WDT (not so great), say Shift-Ctrl-F to obtain a font-size information in px.
  This is the tool that is the closest to what you ask, though I don’t think it’s the most valuable one. Well YMMV 🙂

• Thou should use multiple monitors as does St Jeff.
  This is especially useful as I’m always transforming sth in sth else: looking at PSD/PNG in Adobe software and writing HTML code in an editor, writing CSS rules in the editor and checking in the browser, auditing accessibility of a website in the browser and writing down the results in OOo Writer, etc

• Reload page (in browser along with saving file in the text editor and switching windows) can take ONE keypress: I replaced Ctrl-S / Alt-Tab to browser / F5 by an AutoHotKey macro a long time ago (code below) and bound it to a strategically placed yet useless key on my french keyboard: the ² key that sits between Tab and Esc.
  Saved me from tendonitis and/or carpal tunnel syndrome!
  I use deadkeys and ² to do the same with IE6, IE7 and Safari.

  ---

  #NoEnv ; 4 lines to begin an AHK script
  SendMode Input
  SetWorkingDir %A_ScriptDir%
  SetTitleMatchMode RegEx

  #IfWinActive, Notepad
  ²::
  Send ^s
  IfWinExist, Mozilla Firefox
  WinActivate, Mozilla Firefox
  Send ^r ; refresh the browser
  IfWinNotActive, Notepad
  return

  ---

So here are Firediff and my other productivity tools