CSS Debugging

Awhile back, Dave Shea offered his CSS debugging tips. The one that I use most often has to be setting the border around the elements I happen to be working on. border:1px solid blue; is practically hotkeyed I use it so much.

I've started to expand on the concept and it's already proving quite useful. The first was to switch from solid borders to dashed borders. They actually make it easier to see what's selected.

After that, the next trick was to apply margin and, failing that, padding. At this point, things start to become fairly obvious.

Oh, but here's the fun one: using the * selector. This can be used for every element on the page or just specific sections of the page. For example, if you want to wrap a border around every block element then a quick * {border: 1px dotted green;} will do. Sometimes the entire page is too much. Try using #nav * {border:1px dotted green;} and then only block elements in your nav have borders on them.

And if you haven't already, grab the Web Developer toolbar for Firefox.

Published April 21, 2005 · Updated September 17, 2005
Categorized as HTML and CSS
Short URL: https://snook.ca/s/355

Conversation

9 Comments · RSS feed
Rob Mientjes said on April 21, 2005

Not sure if Gecko already supports it properly, but you'd better use outline instead of border. Border gets in the way with box models. Outline doesn't.

The Web Dev Toolbar does outline, for that matter.

Matthew Pennell said on April 21, 2005

My personal preference is to use background-colour to highlight problem areas. As Rob pointed out, turning on borders will screw up your widths; "background: red;" is less typing too.

Jonathan said on April 21, 2005

I have used background-color, too, on occasion. But background-color doesn't reveal nesting issues (and I'm not sure outline would either). Plus, they can be obscured by images. Border is still my favourite. :)

Calrion said on April 22, 2005

I agree, border is my definate favourite. I use the others from time to time, but generally it's "border: solid 1px #fff;".

Rob: I tried using outline with Firefox 1.0.2 (WinXP) the other day, and it didn't have any effect.

oli young said on April 22, 2005

imvho, if you're doing even semi-complex css, you _need_ Firefox+WebDeveloper. And to that, I'll second the use of -moz-outline: 1px dotted #0000ff !important; instead of border. Border will increase your box size and possibly break layouts, outline won't as it's overlayed on the edge of the block.

bart said on April 27, 2005

Thanks for the tip Oli. That works perfectly. Using border does mess with the layout, especially fixed-width pixel-perfect floats. It is however useful when troubleshooting margin collapsing issues.

bart said on April 27, 2005

Web Developer extension's outline block level elements, selected elements, or custom elements is pretty sweet. It uses the outline property. Display topographic information is very nice, too.

imran said on November 02, 2005

Hi

can you help me to manage a stick up footer on the website for IE 5.0 + .

As you can see 1 on

http://www.bmw.co.uk

Kind regards

imran Hashmi

Viktor said on December 19, 2005

great tip!

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.