I get this problem when the div overflow is set to auto. It's a nuisance because I need to edit a scrolling div. Is there any way to move the pencil icon inside the dotted line with negative margins somewhere maybe?
Fixed it by doubling the depth of the pencil.png in Fireworks and duplicating the pencil image under the original so the pencil.png is now 2 x pencil images with the lower one being visible within the dotted line. This isn't really a proper fix as it only works when "ALL" editable divs are set to overflow: hidden. If there's a mix of hidden and visible overflow [divs to edit] you'll see two pencil images in the visible ones. I'm hoping there's a better way to do this - if not then maybe I'll work on a different image which can work for both, i.e. a single double-ended pencil or something which doesn't look weird when half of it is missing.
Update: By simply doubling the depth of pencil.png and moving the pencil image to the bottom half, the pencil is now visible inside the dotted line. The only problem is that when you log out of edit mode (command + shift +2) the pencil image appears in the top left of the browser window and you need to refresh the page to hide it again. There has to be a better way to do this.