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

To answer the actual question title : I use FireBug!

Answer 2

The Firebug plugin for Firefox has some nice CSS debugging tools.

Answer 3

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 4

Firebug really is your friend here!

Right-click part of your page, choose "Inspect element" and it'll tell you all the styles that are applied to that element. Ones that are superseded are crossed out, so you can see exactly where you've gone wrong.

Answer 5

Magilla Gorilla suspects the lack of ":

<a href=reception">Wedding Reception</a>

Answer 6

The Web Developer extension does some nice stuff too.

Answer 7

You can also use the W3C CSS validator if you don't have access to Firebug. That will generally be able to point out syntax errors.

Answer 8

firebug is a lifesaver in this kind of situation!

Answer 9

• firebug
• web developer
• DOM inspector