Debugging CSS

CSS is all the rage these days and it lets you do some amazing things. But it's got a steep learning curve and it has taken me a long time to get a hang of it for 100% CSS layouts.

I'm working on a new project that is 100% CSS and I've finally got enough CSS knowledge to make it work for me.

Today I learned a new trick for debugging CSS that will probably be old hat to all web designers, but that I wish I'd learned earlier.

When designing using tables, it's common to set border="1" to see how the page is laid out. You can accomplish much the same with CSS by defining these rules:

div { border: 1px solid black; }

span { border: 1px solid black; }

This will show you where your DIVs and SPANs are ending up.