Have you ever tried to match the exact alignment your designers created for you on a web page but you're having a hard time telling if they line up? Well I was, and until just now (literally a few seconds ago I discovered this) it was a giant pain. But if you use two amazing Firefox extensions together, you can make your life a lot easier (I know it helped me).
So first off, I guess this can go without saying, you need Firefox for this. You'll also need the Firebug extension and the measureIt extensions installed.
Let's setup the situation: You're trying to line up two elements on a page (using margins or padding, whatever) but they're too far away to do it with the naked eye. For example, let's say I wanted to line up my name with the title of the home page (see below) (yes I realize they're super close and this technique may be overkill for this situation but keep in mind, this is just a demo ;-)
So I use the Inspector in Firebug and choose the element I want to move up or down. In may case I'll select my name.
Now using measureIt, I draw the line I want both items to line up on.
Notice that you can see the two are just barely off. Maybe two or three pixels. If the two items were further apart, you may not have even seen the difference. With the line there, you know for sure whether they line up or not.
You can now go into Firebug and make the margin adjustments. The line should remain and you can line stuff up.
Once you know how much you need to adjust it by, toss that into the actual style sheet and you're good to go.
Anyways, I found this super useful, hopefully you'll find it useful too.
Until next time!
