Debug CSS with CSS
When coding my tableless web sites I sometimes will use a few lines of CSS code to help me debug the layout.
Afterall, tableless layouts can be quite complex at times, even to the experienced coder. And even more so if your working with someone else's code. Here are some ways that you too, can "debug" your CSS code. Try these out by adding one or two of them to the bottom of your style sheet.
Display All div Borders
This can be extremely useful when you want to find out exactly where all of your absolutely positioned div tags are at, and what their demonsions are.
div { border:solid 1px red; }
Display All td Borders
Optionally, you can also display all table cells, if have any tables left in your code, or (god forbid) you have a table-based layout.
td { border:solid 1px blue; }
For the td, I typically use blue to differentiate between cells and divs.
Display All div Tags With Padding
If you have a div tag, nested within another div tag, within another div tag, (you get the idea...) things can get a little hairy. And even if you use my debug code above to turn borders on, it's still hard to figure out why your layout isn't rendering quite right.
This bit of code helps you to see exactly which div tags contain another div tag, by giving them all a tiny bit of padding on the inside. Also, the !important rule, gives this property higher specificity than any other selectors which may try to override it. Be sure to add this rule if the debugging code ever gets overridden.
div {
border:solid 1px red;
padding:0.5em !important;
}
Display All div ID Names
Forgot what the name of a certain div tag is? No problem.
We can just use the attr(x) function (which won't work in older browsers, or IE6) to pull the ID attribute value out of all div elements, and display them before each div highlighted in yellow.
div {
border:solid 1px red;
}
div::before {
content:attr(id);
background-color:yellow;
color:black;
}
Display All div CLASS Names
Or, if you'd like, you can alternatively display the class attribute value.
div {
border:solid 1px red;
}
div::before {
content:attr(class);
background-color:yellow;
color:black;
}
Display All CLASS Names On Any Element
If your having some severe layout issues, this one works pretty well too. It'll display the class names for all elements, where used, everywhere.
body * [class]::before {
content:attr(class);
background-color:yellow;
color:black;
}
Let me know if you found any of my debug tips here useful to you, or know of one that should be added to this list. Happy coding! 
Dec 27, 2006
Comments
outline: 1px solid red; works better than border. Outline doesn't add to the box-model dimensions. Border can actually beak a layout whereas outline won't. Naturally, IE doesn't support it, but if you're troubleshooting a layout during dev mode, you're starting with something that's not IE anyway.
Yo, Mike... I also have use variations on these when struggeling with designs, but the idea of having thses as a collection is... well, darn right smart ;)
One learns things all the time, and by your article here I learned to copy and paste this, accomplished with my own variations, as a block of "style decoding tags" into my project CSS's... Now I don't have to do this manually each time ;) Thanks for refreshing my head, Mike...
This can be a very handy tool/ idea to use especially when using someone else's design which can be a complicated thing to do (im currently experiencing it)
Yeah great idea and will be useful in most jobs especially in redesigning existing pages (shudder).
I personally use firebug a lot especially for those little margin/ padding issues that annoy you and almost cause you to switch jobs :)
Thanks
I've used variations of some of these, but nice to see a collection in one spot. Good going!
These are great, but I definitely need to mention the Web Developer Toolbar extension for Firefox, which does a lot of these things for you on command (and a lot more too).
Hi:
I've been using the border attribute for several years to understand and find flaws in layout. So much so, that I have it commented (i.e., /* */) in many of my rules.
I use border rules during the design layout phase and then comment them out in production. That way in reviewing my code later, I can see which rules actually influences layout. It's kind of a self-documenting feature.
tedd
Great, guy!
Write a comment
* = required field