We set up pixel to pixel: PixelPerfect cross-browser analogue

Quite often, some customers, giving the layout of the site to the layout, require pixel-by-pixel accurate accuracy in the markup in all browsers.

It is quite easy to check this correspondence - you need to take a screenshot of the site and combine it with a graphic layout, for example, in Photoshop.

But it is not very convenient to use such a technique only during the layout process.
')

Firefox Solution

I recently came across an addon for Firefox called Pixel Perfect .
He displays a translucent layout on top of the layout so that all inaccuracies are immediately visible.

And all Pixel Perfect is wonderful, it is only intended for Firefox, and our layout should work in different browsers.

Solution for everyone

I wrote a small script that can be connected to the file with html markup via the <script> .

It can also be used as a user -script ( greasemonkey-script ) in all browsers for which there is a corresponding extension (or built-in 0 capacity).

In order to feed the script layout, you just need to upload to the directory with your html-file layout in the format of png, jpg or gif, after renaming it layout.png (jpg or gif).

Hotkeys:

• shift + space - show / hide layout layer
• ctrl + enter - resize the browser window to the size of the layout (works in FF, IE6 and Safari)

In order to place the layout as we need (for example, if we create a fixed layout, in the form of a column in the center), we can create in the same directory where we have all the action, the file pmarkup.css :
/* : */
#pmOverlay { /* div, image */
text-align: center;
}

#pmOverlayImg {
/* image */
}


View in action

• Online demo
• Download archive
• Install as greasemonkey script

Tested in IE6-7, Firefox 2-3. Opera 9.5, Safari 3