Where the heck is that extra padding coming from!?!

Bless the day that I heard about Firebug, an add-on for Firefox that allows you to highlight different HTML objects on your page and see the styles associated with that object. See that 10px extra padding on your image? That’s coming from line 131 of your styles.css file.

The only problem is when, as usually happens, you need to debug CSS between different browsers. IE8 almost never renders the page the same way as IE6, IE7, Firefox 1, 2 3, Safari, and Opera. (Yes, I have all these browsers installed on my computer.) Although I haven’t used it yet, Firebug Lite apparently solves this problem. It is a Javascript file that simulates Firebug’s features in any browser. I will definitely try that out and report back on my findings. In the meantime, anyone else try this?

Three websites that I know of are OpenWebDesign.org, OSWD.org, and FreeCssTemplates.org Many of the designs are made by professional designers. They post free designs as a way to generate interest in their paid services. You are free to download the designs and modify them as you please, as long as you leave the “Designed by” link at the bottom of the page. This is one of my favorite designs, and this is a free design we downloaded and modified for a client to work with our website editing tool.

As I wrote in my WordPress Themes post, there are also many of places to find free themes for your WordPress blog. And if you find a design you like on the free design sites I mentioned above, they can be easily modified to work with a WordPress blog.

Get searching!