Down and Dirty Div Diagram

I’m doing a full overhaul of my organizations web site and getting rid of the tables once and for all. As such, I’m using a ton of Divs, and getting just a little bit tangled up in them.

The Web Developer Tool bar in Firefox has a nice ‘outline divs’ option, but it still competes with the visuals on the page. So, I whipped up this quick user style sheet that kills all div styles and gives them all a unique border.

To use it, just cut and past the CSS below into a file and save it. Then, via the Web Developer Toolbar, you can go the the CSS menu and select ADD USER STYLESHEET and you’ll then have a nicely outlined ‘map’ of all your divs.


body {
background-color: #fff !important;
}

* {
background: none !important;
border: none !important;
}

div {
border: 2px solid black !important;
padding: 5px !important;
margin: 5px !important;
min-height: 3px !important;
}

div {
border: 2px solid green !important;
}

div div {
border: 2px dashed orange !important;
}

div div div {
border: 2px dotted teal !important;
}

div div div div {
border: 2px solid red !important;
}

div div div div div {
border: 2px dashed gray !important;
}

div div div div div div {
border: 2px dotted yellow !important;
}

div div div div div div div {
border: 2px solid green !important;
}

div div div div div div div div {
border: 2px dashed orange !important;
}

div div div div div div div div div {
border: 2px dotted teal !important;
}

span {
border: 2px solid pink !important;
padding: 5px !important;
margin: 5px !important;
min-height: 3px !important;
}

Not the prettiest of solutions, but thought I’d share it. There may very well be a better solution out there in the form of a FireFox extensions. If you know of any, let me know!

UPDATE:

Per Bill’s suggestion, I decided to make this a bookmarklet. To use this, drag the link below to your toolbar. Then, take the above CSS and place it into a file called ‘outlineDivs.css’ and place it somewhere on your computer. You’ll need to edit the javascript to then point at that file. (by default, the script looks at ‘http://localhost/utilities/outlineDivs.css’)

Outline Divs Bookmarklet

UPDATE II:

I went ahead and made a self contained bookmarklet as well. The advantage is that you don’t need your own CSS file on your hard drive. The drawback is that it’s a bit more of a pain to edit the CSS if you want to tweak it yourself. Enjoy.

Self Contained Show Divs Bookmarklet