CODEWITHSUNDEEP
htmlcss
Rob Y
Rob Y

Reputation: 841

What tools exist to debug css?

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>

Upvotes: 8

Views: 585

Answers (9)

Phil
Phil

Reputation: 3648

Upvotes: 0

IAdapter
IAdapter

Reputation: 64727

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.

Upvotes: 28

chaos
chaos

Reputation: 124277

The Web Developer extension does some nice stuff too.

Upvotes: 5

scottynomad
scottynomad

Reputation: 1371

firebug is a lifesaver in this kind of situation!

Upvotes: 1

Rich Adams
Rich Adams

Reputation: 26574

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.

Upvotes: 3

Magilla Gorilla
Magilla Gorilla

Reputation:

Magilla Gorilla suspects the lack of ":

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

Upvotes: 2

teedyay
teedyay

Reputation: 23511

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.

Upvotes: 3

Alex McBride
Alex McBride

Reputation: 7011

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

Upvotes: 3

BigJump
BigJump

Reputation: 16409

To answer the actual question title : I use FireBug!

Upvotes: 15

Related Questions