Home arrow DHTML arrow Page 4 - Marks, Orphans, and More Style Sheet Properties

Marks, Orphans, and More Style Sheet Properties

If you're looking for a thorough resource on style sheet properties, you've come to the right place. This article, the seventh part of a series, covers marks, orphans, and more. It is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Copyright © 2006 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
October 11, 2007
  1. · Marks, Orphans, and More Style Sheet Properties
  2. · Moz border radius
  3. · Orphans
  4. · Outline-offset

print this article

Marks, Orphans, and More Style Sheet Properties - Outline-offset
(Page 4 of 4 )

IE n/a NN n/a Moz 1.8.1 Saf 1.2 Op n/a CSS 3

Inherited: No

Controls the distance beyond the element’s border (equally in each direction) where the outline is drawn.

CSS Syntax

outline-offset: length

Value                   A CSS length value. One value controls all sides of the outline.

Initial Value         0

Example         h2 {outline-offset: 3px}



Applies To             All elements.


Object Model Reference


IE 5(Mac) NN n/a Moz 1.8 Saf 1.2 Op 7 CSS 2

Inherited: No

Controls the style of an outline around an element. These are the same edge designs as border styles.

CSS Syntax

outline-style: borderStyle


Style values are constants that are associated with specific ways of rendering border lines. See border-style for a list and illustration. One value controls all sides of the outline.

Initial Value       none


h2 {outline-style: solid}
div {outline-style: groove}

Applies To                   All elements.

Object Model Reference


IE 5(Mac) NN n/a Moz 1.8.1 Saf 1.2 Op 7 CSS 2

Inherited: No

Controls the thickness of an outline around an element. To prevent surrounding content from rendering under the outline, you should consider adding a margin around the element.

CSS Syntax

outline-width: thin | medium | thick | length


Three constants—thin | medium | thick—allow the browser to define exactly how many pixels are used to show the outline. For more precision, you can also assign a length value (see the discussion of length values at the beginning of this chapter). One value controls all sides of the outline.

Initial Value           medium



h1 {outline-style: ridge; outline-width: 5px}
div {outline-style: solid; outline-width: 2px}

Applies To               All elements.

Object Model Reference


IE 4 NN n/a Moz all Saf all Op all CSS 2

Inherited: No

Defines how the element treats content with rendered dimensions that exceed the specified height and/or width of the container. Except for some types of content that demand a fixed width (a pre element, for instance), the default behavior of an element is to respect the width property setting and handle the issue of overflow in the height of the element. Assigning the overflow property to the body element in an attempt to control the display of scroll bars is risky business for cross-browser compatibility. Test your overflow code thoroughly on IE for Windows (in quirks and standards-compatible modes).

A setting of visible causes the containing block to expand to allow the full width (if fixed) and height of the content to be displayed. If borders, margins, and padding are set for the element, they are preserved around the expanded content block. If the element has height and width specified, as well as a background image or color, and if the content extends beyond the specified size, the results vary with browser family. IE for Windows in quirks mode expands the height of the background to accommodate the content, pushing succeeding content downward to accommodate the overflowing content. Recent browsers and IE 7 in standards-compatibility mode constrain the background rectangle to the specified size, but the content bleeds beyond the rectangle, and overlaps content that comes after the overflowing element. Because this is the default value for the overflow style property, it is best to specify some other overflow value (or clipping rectangle for a positioned element) whenever you restrict the size of an element.

A setting of hidden forces the block to observe its height and width settings, potentially causing the content to be clipped by the size of the block. Borders and padding are preserved, but margins may be lost along the edges that clip the content. No scrollbars appear with this value.

A setting of scroll usually generates a set of horizontal and vertical scrollbars inside the rectangle of the content block, whether they’re needed or not. The bars become active only if the content actually requires scrolling in any direction.

A setting of auto should generate scroll bars only if the content in the block requires it. In practice, browsers tend to add only a vertical scrollbar when the content is text that can adjust to the specified width of its container.

CSS Syntax

overflow: overFlowType

Value              Any of the following constants: auto | hidden | scroll | visible .

Initial Value           visible


div.aside {position: absolute; top: 200px; left: 10px; height: 100px;
width: 150px; overflow: scroll}

Applies To               Block-level, replaced, and positioned elements.

Object Model Reference


Please check back next week for the continuation of this article.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials