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*******@marx 7.org> wrote in message
news:22******** *************** ***@posting.goo gle.com...

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 "voyeuristi c" 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
"accessibil ity" 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 .spartanicus.ut vinternet.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