Firebug — Pretty Darn Good CSS Tool

Firebug is an addictive little addon to Firefox which lets you inspect the CSS properties of essentially anything you can click on and modify them in real time.  This lets you easily simulate what would happen if you actually changed the properties, except without needing a page refresh cycle.  If you play around with it, it can help answer the big (and befuddling) questions like What Line In My 2,000 Line CSS or HTML File Makes This Box Go Here, which throw non-designer me for a loop.

I used Firebug for ten minutes to make some changes to Bingo Card Creator’s site that I’ve been putting off for over a year now.  People would actually mail me to say “You know, your header doesn’t actually go the entire width of your content area — the menu on the right juts out a little” (twelve pixels, as it turns out).  I always thanked them for the comment and made a mental note to do something about it, then (when I actually opened the CSS file) got lost and gave up.

It also gives me a feeling of ownership of the design, which (since I am not a designer and have the artistic acuity of a nearsighted mole) I generally treat like holy writ that I am not fit to alter.  While I was on a roll doing pixel-perfect accuracy, I changed something that has been a nuisance forever — teeny tiny font in my H1 and H3 headers (11 pixels for a page header… not a quality choice!  But I put up with it for forever).  I think they are both more visible and more aesthetically pleasing now.

If you have any comments on the new design I’d love to hear them.  It isn’t a quantum leap in quality, obviously — just an evolution of inches, like most of the things I do.

Explore posts in the same categories: Uncategorized

One Comment on “Firebug — Pretty Darn Good CSS Tool”

  1. oliver Says:

    Hi Patrick,

    Now that you’ve discovered the beauty of Firebug (I couldn’t live without it) you will find it very easy to do this: make the space between the Quicklinks and the main content boxes the same as the space between the Quicklinks and Our Policies. In other words, the vertical padding should be the same as the horizontal padding. Firebug made it so easy that I found a fix:

    .contentbox (sunny.css line 147)

    width: 595px;

    You may also want to change the footer width to match.

    You may want to add some padding to the Synonyms box. The text is scrunched up against the sides. No good.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: