-moz-orient

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

The -moz-orient CSS property specifies the orientation of the element to which it's applied.

Initial valueinline
Applies toany element; it has an effect on progress and meter, but not on <input type="range"> or other elements
Inheritedno
Mediavisual
Computed valueas specified
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

How to read CSS syntax.
inline | block | horizontal | vertical

Values

inline
The element is rendered in the same direction as the axis of the text: horizontally for horizontal writing modes, vertically for vertical writing modes.
block
The element is rendered orthogonally to the axis of the text: vertically for horizontal writing modes, horizontal for vertical writing modes.
horizontal
The element is rendered horizontally.
vertical
The element is rendered vertically.

Examples

HTML

<p>
  The following progress meter 
  is horizontal (the default):
</p>
<progress max="100" value="75"></progress>
<p>
 The following progress meter
 is vertical:
</p>
<progress class="vert" max="100" value="75"></progress>

CSS

.vert {
  -moz-orient: vertical;
  width: 16px;
  height: 150px;
}

Result

Specifications

Though submitted to the W3C, with positive initial feedback, this property is not yet part of any specification; currently, this is a Mozilla-specific extension (that is, -moz-orient).

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support Not supported 6.0 (6.0)-moz[1] Not supported Not supported Not supported
auto value Not supported 21.0 (21.0)[2]
Not supported40 (40)
Not supported Not supported Not supported
inline and block values Not supported 40 (40) Not supported Not supported Not supported

[1] In Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), there was a bug that causes vertical <progress> elements to render with the dimensions of a horizontal bar. This is fixed in Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4).

[2] The auto value was equivalent to horizontal.

See also

Document Tags and Contributors

 Contributors to this page: foxbenjaminfox, SphinxKnight, Sebastianz, teoli, Sheppy, ethertank
 Last updated by: foxbenjaminfox,