Category: CSS

Pixel Precision with Diagnostic CSS

Pixel Precision with Diagnostic CSS

Here’s a little CSS trick I started using a while ago that has really helped me to achieve pixel precision when converting Photoshop PSD (or Fireworks PNG or whatever) design comps into (X)HTML and CSS web standards goodness. The idea is to take the page that you’re developing in HTML and CSS and overlay it on top of the design mockup you’re working from. And you can do this inside of any browser. The idea borrows upon the spirit of “Diagnostic Styling” evangelized by Eric Meyer by using a few extra classes. First I take the design file and save it (save for web) as a flat PNG-32 into a directory that’s easily accessed by the css file I’m developing.  Then I open the HTML…

Saying Goodbye to the Overflow: Hidden Clearing Hack

Saying Goodbye to the Overflow: Hidden Clearing Hack

I’ve been thinking of this for a while now, and it’s finally time to part ways with the overflow: hidden (and overflow: auto) clearing hack. Jeff Starr’s recent and excellent post – The New Clearfix Method – and the ensuing comments were enough to finally prompt me to write about it here. (And since I started writing this, Jonathan Snook has started a Twitter dialog about overflow vs. clearfix). While the  clearfix method is a tried and true hack, I’ve always disliked muddying up my HTML markup with crufty “clearfix” classes strewn about. So I ended up using overflow: hidden as much as I could. But overflow: hidden is not without its drawbacks. Although there is no extra class to apply in the HTML (win!), there may be situations when you want to have child elements positioned partially…

EM Chart

EM Chart

Using a relative unit such as EM is a great way to maintain the vertical rhythm of a web page when a user resizes text in their browser. Constantly reaching for a calculator to compute the correct EM value to use every time you need to is also a great way to drive yourself mad. Let’s say you have an H3 that’s 24 pixels. It doesn’t matter how the font-size is set (pixels, EMs, percentages, etc). You can check the actual font-size in pixels using Firebug by checking “Show Computed Style” in the Options menu in the upper right corner of the CSS/Style panel while viewing in HTML mode. You’ve checked the design comp and measured exactly 9 pixels of bottom margin under the H3 until the…