What tools exist to debug css?

Question

I am tearing my hair out over this one. What tools do people use to debug formatting issues with css? I have some relatively simple formatting for navigation using css which looks like this:

/* sub navigation */
.sidenav {
    float: right;
    width: 218px;
}
.sidenav h1 {
    background: #BCB39F url(img/sidenavh1.gif) repeat-x;
    border-bottom: 1px solid #999;
    border-top: 1px solid #CCC;
    color: #4A4A44;
    font-size: 1.2em;
    height: 22px;
    margin: 0;
    padding-left: 12px;
}
.sidenav h1 a {
    color: #554;
    text-decoration: none;
    display: block;
}
.sidenav h1 a:hover {
    background: #D6CCB9;

    color: #654;
}

I then have this code in my page:

<div class="sidenav">
<a href="ceremony">Wedding Ceremony</a> 
<a href="reception">Wedding Reception</a> 
<div class="clearer"></div>
</div>

and it doesn't pick up the style. It was working fine, so one of my changes elsewhere must have knocked something out of place (I suspect a somewhere, but I am really struggling to find what it was. The rest of my page formats fine...)

Any suggestions?

---

Answer found thanks to firebug.

The formatting was not applied since the formating for links only applied to links in the <h1> element - ie the html should have been:

<div class="sidenav">
<h1><a href="ceremony">Wedding Ceremony</a></h1>
<h1><a href=reception">Wedding Reception</a></h1>
<div class="clearer"></div>
</div>

Answer 1

firebug. There is also a pure javascript version that works in IE, called firebug lite.

It allows you to turn off or change any CSS you want on the fly.

Answer 2

To answer the actual question title : I use FireBug!