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.
Conversation
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.
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.
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. :)
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.
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.
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.
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.
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
great tip!