When designing a Web site layout or just playing in CSS on your recent project, you might run into the same problem I have been having since day one. It is hard to determine exactly where all of these pixel marks are. You say you want the menu 100 pixels to the left, but do you really know exactly where that is? No.

Well to save the day and to give us all less of a headache to worry about while doing Web site design Andy Budd has developed a bookmarklet that will put the pixel grid over any Web site you are viewing.

I had my doubts when I read about this - but it really does make designing a layout or editing a few key elements a lot easier. No longer do I have to “test and guess” when it comes to editing a layout and design. I only wish I had found this before I started designing my Web sites because it would have cut down a day’s worth of editing and designing down to a few hours for sure.

For another solution to the same problem, you might also check out the grid background image developed by subtraction.com. No cool effects here, but it does give you another good tool to work from when you need to know exactly how many pixels you have used.

[tags]pixel, css, design, layout, bookmarklet, help[/tags]