I often get a Web page mockup from a graphic designer, and the task of implementing the design in CSS. I use this trick to achieve precise alignment and coloring, without spending much time measuring:
- Save the mockup as a PNG.
- On Chris Pederick's Web Developer Toolbar, Click CSS: Edit CSS.
- Edit the CSS in the toolbar to make the PNG your body background. The real document elements now render over the background, which highlights alignment and color mismatches.
- Continue editing CSS until the colors match.
- Then edit the CSS until page elements align, overlapping the background image exactly.
- Test by removing the mockup background image statement in the CSS. The page should look no different as you toggle the mockup on and off.
- Click the Save button in the toolbar's Edit CSS view.
- Save the CSS changes locally, and then promote the finished CSS to the server.
And of course, follow up with browser testing.