Back in the good old days of coding websites, a lot was done by trial and error. You would assign styles to objects on your web page and hope everything would come together as you envisioned. Without fail, styling issues would arise, and as the website grew larger it was a headache to figure out what style was affecting what HTML object.
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?