Excellent CSS debugging technique

[Trent]

I found an excellent technique in "Eric Meyers on CSS" that I thought
some of you might be interested in.

The technique is to use "debugging" styles to quickly see the layout
of a page. For example, if you are trying to see the layout of a
table-based HTML form (to convert to CSS, of cource ;) ), you would
add the style:

table { border : 2px solid blue;}

I have also used this method to find out where browsers are placing my
DIV's and SPAN's. Overall, I thought it was a great idea. Does
anyone else us it regularly?

[Martin Honnen]

Trent wrote:

I found an excellent technique in "Eric Meyers on CSS" that I thought
some of you might be interested in.

The technique is to use "debugging" styles to quickly see the layout
of a page. For example, if you are trying to see the layout of a
table-based HTML form (to convert to CSS, of cource ;) ), you would
add the style:

table { border : 2px solid blue;}

I have also used this method to find out where browsers are placing my
DIV's and SPAN's. Overall, I thought it was a great idea. Does
anyone else us it regularly?

Well, Mozilla has the DOM inspector which highlights nodes with a red
border.
And Opera 7 has nice debugging style sheets, try
View->Style->User Mode->Show structural elements/debug with outline
--

Martin Honnen
http://JavaScript.FAQTs.com/

[Andrew Thompson]

"Trent" <sp*******@marx7.org> wrote in message
news:22**************************@posting.google.c om...

I found an excellent technique in "Eric Meyers on CSS" that I thought
some of you might be interested in.

The technique is to use "debugging" styles ... .... table { border : 2px solid blue;}

...Does anyone else us it regularly?

Only when I am having a problem with a
layout (i.e. every other day).

--
Andrew Thompson
* http://www.PhySci.org/ PhySci software suite
* http://www.1point1C.org/ 1.1C - Superluminal!
* http://www.AThompson.info/andrew/ personal site

[Barry Pearson]

Trent wrote:

I found an excellent technique in "Eric Meyers on CSS" that I thought
some of you might be interested in.

The technique is to use "debugging" styles to quickly see the layout
of a page. For example, if you are trying to see the layout of a
table-based HTML form (to convert to CSS, of cource ;) ), you would
add the style:

table { border : 2px solid blue;}

I have also used this method to find out where browsers are placing my
DIV's and SPAN's. Overall, I thought it was a great idea. Does
anyone else us it regularly?

Yes. There are at least 2 different ways:

1. Put extra features like that into the CSSs while you are developing. (I use
both border & background-color for that). If you keep them blocked together,
you can "comment them out" when they are OK, leaving them there for easy
switch-on later.

2. Use the Web Developer's toolbar that you can add to Mozilla Firebird. It
has a *large* array of such debugging features built in that you can switch on
and off for any pages. It is very "voyeuristic" being able to see at a glance
what tables & headers, etc, *someone else's* web site is using! (Other
browsers have such tools, but this is the best I've found).
http://texturizer.net/firebird/extensions/#webdeveloper

I still often browse the web using IE with a local CSS (set with the
"accessibility" menu), although I use:
table { border: 1px dotted blue; }
It tells me just how many layout-tables exist across the web!

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

[Philipp Lenssen]

Trent wrote:

I found an excellent technique in "Eric Meyers on CSS" that I thought
some of you might be interested in.

The technique is to use "debugging" styles to quickly see the layout
of a page. For example, if you are trying to see the layout of a
table-based HTML form (to convert to CSS, of cource ;) ), you would
add the style:

table { border : 2px solid blue;}

I have also used this method to find out where browsers are placing my
DIV's and SPAN's. Overall, I thought it was a great idea. Does
anyone else us it regularly?

I have a user-stylesheet like that. Mostly, my own tables are not that
complex. But tables of pages someone else did tend to use some quite
heavy table layout. Added to what you do above I do something like:

td { border: 1px solid red; }
td td { border: 1px solid green; }
td td td { border: 1px solid yellow; }

etc. you get the idea

--
Google Blogoscoped
http://blog.outer-court.com

[Spartanicus]

Trent wrote:

I found an excellent technique in "Eric Meyers on CSS" that I thought
some of you might be interested in.

The technique is to use "debugging" styles to quickly see the layout
of a page. For example, if you are trying to see the layout of a
table-based HTML form (to convert to CSS, of cource ;) ), you would
add the style:

table { border : 2px solid blue;}

Unlike border, outline does not affect the layout, so that would be the
preferred option. But the whole trick is silly, it's much better to have
the UA apply this (as is possible with Opera).

--
Spartanicus

[Trent]

Spartanicus <[e-mail]> wrote in message news:<sn********************************@news.spar tanicus.utvinternet.ie>...

But the whole trick is silly, it's much better to have
the UA apply this (as is possible with Opera).

I haven't found a way of getting IE to do it. (Haven't really look,
honestly). I usually have about 3 different browsers open and test
code as I go along, so adding the debugging styles is a quick
across-the-board way of seeing results.

[Alan J. Flavell]

On Mon, 15 Dec 2003, Spartanicus wrote:

table { border : 2px solid blue;}
Unlike border, outline does not affect the layout, so that would be the
preferred option.

It's been my experience (though, hopefully, these problems will go
away with time) that some of the worse browsers actually get better
results when a border is defined. So there can be some advantages in
defining the border as, for example, 2px solid during this stage of
development, even if none is wanted in the finished product, and then
switching it to 2px none, so that it's still there (and stabilising
the presentation in NN4 and such), but becomes invisible.
But the whole trick is silly, it's much better to have
the UA apply this (as is possible with Opera).

With the greatest of respect: if we're trying to get improved results
across many browsers, then we need a construction technique which does
its job on those browsers. If we only wanted CSS to work on browsers
whose implementation meets our minimum demands, then there are
techniques available for hiding the CSS from the rest, and then they'd
just have to make do with their browser's inherent rendering of HTML.
But as long as we're trying to get _some_ kind of sense out of NN4.*
and IE-whatever-version (and WebTV if you're a masochist), we need
design techniquest which work with those. I think the border trick is
useful - I even wrote a page about it, but as I'm only a dabbler in
this, really, I'll defer to Eric Meyers.

[JustAnotherGuy]

Trent wrote:

table { border : 2px solid blue;}

I have also used this method to find out where browsers are placing my
DIV's and SPAN's. Overall, I thought it was a great idea. Does
anyone else us it regularly?

<snobbish voice> I was doing that before I knew what CSS *was*, and I'm
just a dallying novice ;)</snobbish voice>

[Spartanicus]

Alan J. Flavell wrote:

But the whole trick is silly, it's much better to have
the UA apply this (as is possible with Opera).

With the greatest of respect: if we're trying to get improved results
across many browsers, then we need a construction technique which does
its job on those browsers. If we only wanted CSS to work on browsers
whose implementation meets our minimum demands, then there are
techniques available for hiding the CSS from the rest, and then they'd
just have to make do with their browser's inherent rendering of HTML.
But as long as we're trying to get _some_ kind of sense out of NN4.*
and IE-whatever-version (and WebTV if you're a masochist), we need
design techniquest which work with those. I think the border trick is
useful - I even wrote a page about it, but as I'm only a dabbler in
this, really, I'll defer to Eric Meyers.

The proposed usage was as a *debugging technique*, this can be done
using the most advanced UA if you take the limitations of other UA's
into account. As a final step the code can then be ruggedized to work in
less capable clients.

Your assumption that "we" are trying, or even should be trying to get
any CSS to work in NS4 is out of step with reality.

--
Spartanicus

[Barry Pearson]

Trent wrote:

Spartanicus <[e-mail]> wrote in message
news:<sn********************************@news.spar tanicus.utvinternet.ie>...

But the whole trick is silly, it's much better to have
the UA apply this (as is possible with Opera).

I haven't found a way of getting IE to do it. (Haven't really look,
honestly). I usually have about 3 different browsers open and test
code as I go along, so adding the debugging styles is a quick
across-the-board way of seeing results.

You can identify your own CSS in Tools > Internet options > Accessibility.

I often use such a CSS for this sort of diagnostic, eg:
table { border: dotted 1px blue; }
(It works for IE 5 and IE 6, although IE 5 makes the above look solid not
dotted!).

I use both methods, depending on the purpose. Sometimes I want borders or
background colours just for certain features, not all of a type.

--
Barry Pearson
http://www.Barry.Pearson.name/photography/
http://www.BirdsAndAnimals.info/
http://www.ChildSupportAnalysis.co.uk/

[Jerry Sievers]

sp*******@marx7.org (Trent) writes:

DIV's and SPAN's. Overall, I thought it was a great idea. Does
anyone else us it regularly?

yes been doing this for some time but didn't know there's a text about
it.

i'm mostly a backend specialist but when i do layout work, i will
sometimes use all sorts of colorization and such to see much more
easily where things get positioned.

i have impaired vision and must do this out of necessity. others
don't need the technique as much i suppose.

a page layout with complex structure can look something like a tossed
salad when i'm in debugging mode!

bye.
--
-------------------------------------------------------------------------------
Jerry Sievers 305 854-3001 (home) WWW ECommerce Consultant
305 321-1144 (mobile http://www.JerrySievers.com/

[Christopher P. Winter]

On 15 Dec 2003 05:29:30 -0800, sp*******@marx7.org (Trent) wrote:

I found an excellent technique in "Eric Meyers on CSS" that I thought
some of you might be interested in.

The technique is to use "debugging" styles to quickly see the layout
of a page. For example, if you are trying to see the layout of a
table-based HTML form (to convert to CSS, of cource ;) ), you would
add the style:

table { border : 2px solid blue;}

I have also used this method to find out where browsers are placing my
DIV's and SPAN's. Overall, I thought it was a great idea. Does
anyone else us it regularly?

This is an excellent book all around. Expensive, but worth it IMO. Also,
the companion Web site is very good. Look for the three pages on a glossary
for the book, choosing a Doctype, and hiding styles from older browsers.

Chris
--
Of course, I got my copy for free -- from the local public library.