how does one "debug" a css file

Question

I'm new to (modern) web development. Anyway, I downloaded a image rotator and a drop down menu that uses jquery. Now, I put them together and they work fine. But with this drop down menu, I have a horizontally sliced up picture instead of a vertical list of choices.

If I just put the images A, B, C - for whatever reason it places them vertically of one another instead of left to right. So, I tried putting them in a little table - and it forces a small gap to exist between the pictures instead of having them gapless left to right -- even though I say border = 0.

What do I do to debug this?

Answer 1

Download firebug, or try using a google chrome web debugger (ctrl + shift + J)

Fire bug may be better for you because it will allow you to edit the webpage and see how certain css calls will effect the page. It is what I use all the time

There is also a download (ill get the link) that will allow you to run firebug in other browsers

Edit

Firebug lite (For Google Chrome)
Firebug (For Firefox)

Answer 2

Try the Firebug plugin for Firefox. You can use it to determine which rules are applying to your dom elements with simple point/click..

You can also edit CSS on the fly and see the changes immediately - handy when you're moving things around and don't want to refresh after every change.. Make changes in the CSS in Firebug and when you're satisified, copy them back into your files.