David Nash

When I write HTML and CSS I’ll usually create a mockup – I take a high quality JPG of the design and put it into a very simple page that shows the JPG, centered on the screen. Then in Firefox I switch back and forth between the page I’m working on and the mockup so that I can get the design pixel-perfect.

Well today all that will change. I’ve discovered the Pixel Perfect Firefox Extension which allows me to overlay the mockup over what I’m designing.  You can set the opacity and quickly toggle the overlay on and off.

I’m not sure about centering – it doesn’t seem to do that automatically. But I think I could use the MeasureIt extension to get the width of the main column, set it in CSS with ‘margin: 0 auto’ to centre it, and then drag the overlay to match and base everything off that.

My job just got slightly easier again.

Awesome!

Very occasionally I’ll use an empty DIV for decoration, and in CSS use height: 1px.

In IE6 to make this work you need to put comments inside the DIV, otherwise it’ll display at the height of the font you’re using.

<div class=”line”></div>

becomes

<div class=”line”><!– –></div>

You don’t need any line-height fixes in the CSS. Yes, it’ll add to your markup a bit, but you should probably be explaining why you’re using meaningless, empty DIVs anyway.

I like sIFR, but it really bugs me that I have to read through an entire tutorial to get something really basic up and running. This is a simple sIFR3 demo, using the basic cochin.swf file and an almost minimal amount of code to see it in action.

Download my minimal sIFR3 demo here.

I believe you’ll need to upload it to a webserver to run it, you won’t just be able to open the index.html file to see it working.