Firefox's "Outline" Feature.

[Lance]

Not really a browser question, I really think this belongs in CSS because of the particulars.

In Firefox with the Web Developer's Toolbar installed, there is a nifty feature called "Outline". When selected for, let's say, Block Level Elements, it will put a 1px dashed "border" around all the block level elements on the page. I put "border" in quotes because it doesn't work according to CSS rules.

If I have a tightly laid out page and just start slapping a 1px border on every element, obviously everything is going to shift around. Things that are WIDTH: 100% will now be wider than the page, etc.

But that doesn't happen when Firefox applies it's "border" for some reason. Does anyone have any idea what they're doing? How they're applying that border without shifting the elements around? I assume it's with CSS somehow, but the specific nature escapes me.

Help and ideas greatly appreciated.

[iamlost]

It is a use of the CSS 2.1 "outline" property:

[w3.org ]

18.4 Dynamic outlines: the 'outline' property

At times, style sheet authors may want to create outlines around visual objects such as buttons, active form fields, image maps, etc., to make them stand out. CSS 2.1 outlines differ from borders in the following ways:

1. Outlines do not take up space.
2. Outlines may be non-rectangular.

The outline properties control the style of these dynamic outlines.

...........................

The outline created with the outline properties is drawn "over" a box, i.e., the outline is always on top, and doesn't influence the position or size of the box, or of any other boxes. Therefore, displaying or suppressing outlines does not cause reflow.

[Lance]

Okay, thanks. It figures IE doesn't support it. Any ideas on a quick and easy way to fake that in IE?