Comments on: Pixel Precision with Diagnostic CSS

By: Andy Ford

Andy Ford — Wed, 19 Oct 2011 21:10:43 +0000

@Newbie Drewbie – I do still use this method quite a bit. I’ve thrown together a little PHP-based microframework that I use when creating static HTML/CSS/JS template deliverables. One of its features is you can add a URL query string like ?underlay=home and the background underlay is done dynamically. I really need to put my microframework on GitHub.

More and more, I’m working on responsive sites with fluid widths. So during development I’ll temporarily center and set the width of the site to match the static mockup. Something like:
body { width: 972px; margin: 0 auto; }

By: Newbie Drewbie

Newbie Drewbie — Wed, 19 Oct 2011 15:28:18 +0000

Hi Andy,

so 3 years have passed since this post, I wanted to ask what your preferred method is these days? Are you still using this technique? I’d appreciate your reply.

Greets,

By: Anonymous

Anonymous — Sat, 20 Nov 2010 14:12:04 +0000

[...] [...]

By: jitendra vyas

jitendra vyas — Thu, 17 Jun 2010 03:35:22 +0000

I liked your solution. I use pixel-perfect in Firefox but your solution is very good to match perfection in IE.

By: 6 CSS diagnostic resources for every Web developer’s toolbox « Seb2.0

6 CSS diagnostic resources for every Web developer’s toolbox « Seb2.0 — Thu, 23 Apr 2009 07:21:38 +0000

[...] Pixel Precision by Andy Ford [...]

By: Peter Anselmo

Peter Anselmo — Fri, 05 Dec 2008 01:17:13 +0000

Good post Andy. I usually just line up the upper left corners of my browser and Photoshop file, and re-size my browser window to check if everything lines up. This is obviously a much more accurate method

By: CSSKarma.com » This Week in Links 10/15

CSSKarma.com » This Week in Links 10/15 — Wed, 15 Oct 2008 16:52:22 +0000

[...] Pixel Precision with Diagnostic CSS [...]

By: Alex

Alex — Mon, 13 Oct 2008 13:35:24 +0000

i think firefox is better then IE 7 or 8. thanks for your message

By: Andy Ford

Andy Ford — Sun, 12 Oct 2008 15:57:44 +0000

John,
I have seen XRAY. Pretty cool, but I’m so used to Firebug as my main HTML/CSS debugging companion that XRAY hasn’t made it into my workflow (but I’ll be giving it another go for sure!)

Can XRAY be used to edit CSS a la Firebug? What language would I be hacking in – JavaScript?

thanks!

By: John Allsopp

John Allsopp — Sat, 11 Oct 2008 23:18:38 +0000

Hi Andy,

have you looked at XRAY?

http://westciv.com/xray

It’s also hackable, so you might be able to adapt it to meet your needs.