Home arrow DHTML arrow Ruby-Position, Size, and Other Style Sheet Properties
DHTML

Ruby-Position, Size, and Other Style Sheet Properties


In this ninth part of an ongoing series on style sheet properties, you'll learn about size, scrollbars, and more. This article 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 / 6
October 25, 2007
TABLE OF CONTENTS:
  1. · Ruby-Position, Size, and Other Style Sheet Properties
  2. · Size
  3. · Speech-rate
  4. · Text-autospace

print this article
SEARCH DEVARTICLES

Ruby-Position, Size, and Other Style Sheet Properties
(Page 1 of 4 )

Alphabetical Style Sheet Property References: Ruby-position 

ruby-position
IE 5 NN n/a Moz n/a Saf n/a Op n/a CSS 3

Inherited: Yes

Controls whether nested ruby ( rt element) text renders on the same line or above its related ruby base ( rb element) text.

CSS Syntax

ruby-position: positionType

Value

IE recognizes one of the following constants, above | inline, while the preliminary CSS3 specification prefers these constants: after | before | inline | right. For more details on ruby-related styles, visit http://www.w3.org/TR/css3-ruby.

Initial Value      above (IE); before (CSS3).

Applies To

ruby elements (or any element that has its display property set to ruby-text).

Object Model Reference

[window.]document.getElementById("elementID").style.rubyPosition

scrollbar-3dlight-color, scrollbar-arrow-color, scrollbar-base-color, scrollbar-darkshadow-color, scrollbar-face-color, scrollbar-highlight-color, scrollbar-shadow-color, scrollbar-track-color
IE 5.5 NN n/a Moz n/a Saf n/a Op n/a CSS n/a

Inherited: No

Controls the colors for specific components of a scrollbar user interface element associated with scrollable elements. The following table describes which pieces of a scroll bar are controlled by each property.

Property

Description

scrollbar-3dlight-color

Top and left edges of the scroll slider and arrow button boxes

scrollbar-arrow-color

Arrows inside arrow button boxes

scrollbar-base-color

Overall hue of the scroll bar 

scrollbar-darkshadow-color

Right and bottom edges of the scroll slider and arrow button boxes

scrollbar-face-color

Forward flat surfaces (e.g., front-facing panel of slider) and alternating pixels of the track

scrollbar-highlight-color

Normally white pixels that create 3D effects, plus alternating pixels of the track

scrollbar-shadow-color

Slighlty thicker edges controlled by scrollbar-darkshadow-color

scrollbar-track-color

Entire track, as solid version of specified color

You can experiment with combinations of multiple scroll bar pieces and colors.

 

CSS Syntax

scrollbar-3dlight-color: color
scrollbar-arrow-color: color
scrollbar-base-color: color
scrollbar-darkshadow-color: color
scrollbar-face-color: color
scrollbar-highlight-color: color
scrollbar-shadow-color: color
scrollbar-track-color:
color

Value                 CSS color values.

Initial Value       Varies with user Display control panel settings.

Example             textarea {scrollbar-face-color: lightyellow}

Applies To          applet, bdo, body, custom, div, embed, object, and textarea elements.

Object Model Reference

[window.]document.getElementById("elementID").style.scrollbar3dLightColor [window.]document.getElementById("elementID").style.scrollbarArrowColor [window.]document.getElementById("elementID").style.scrollbarBaseColor [window.]document.getElementById("elementID").style.scrollbarDarkShadowColor [window.]document.getElementById("elementID").style.scrollbarFaceColor [window.]document.getElementById("elementID").style.scrollbarHighlightColor [window.]document.getElementById("elementID").style.scrollbarShadowColor [window.]document.getElementById("elementID").style.scrollbarTrackColor

Next: Size >>

blog comments powered by Disqus
DHTML ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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