Pre-viewer for CSS boxes anyone ?

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
Formatting nested, floating boxes can be tricky.

Does anyone know of a sort-of pseudo-browser or pre-viewer that lets
you see explicitly the inside and outside edges of margins, borders,
padding and content (sometimes called perimeters, I think) ?

Imagine, for instance, the "frontier" between padding and content
being shown as a coloured, dotted line in our pre-viewer.  Something
like that . . .

Re: Pre-viewer for CSS boxes anyone ?

Quoted text here. Click to load it

Opera with "Debug" turned on does something close to that.


Re: Pre-viewer for CSS boxes anyone ?

There's quite a few nice tools you can use which use javascript
"bookmarklets", which are just mini-scripts you drag to your browser
toolbar, then click on them while you're on a page, and they will take
some action on that page, like outline all the divs, show image
placeholders, etc.  They are extremely handy.  One site I like to
reference is:
(or just do a search on 'bookmarklets')

If you use firefox, you can also get a similar (better) set of web
tools via an entire toolbar plugin built (free) for firefox.  It is
at: /.

The latter tool, albeit specific to firefox, is really nice. The only
difficulty is that you need to assure you test the css or script in
msie as well to assure cross-browser functionality.  For that reason,
the bookmarklets come in handy for MSIE.

Hope that helps.. I'm sure it will!


Re: Pre-viewer for CSS boxes anyone ?

Thanks Jim (and Mrcakey).
Booklets were new to me and it took a little while work out how to add
them and use them !
I now wish I knew JS better so that maybe I could write an "explicit
edges" booklet.
Any volunteers . . . ?

jim schreef:
Quoted text here. Click to load it

Site Timeline