orient Redirect 1

Summary

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

Syntax

orient:  auto | horizontal | vertical

Values

auto
For <progress> and <meter> this is equivalent to horizontal.
horizontal
The element is rendered horizontally.
vertical
The element is rendered vertically.

Examples

This example displays two progress bars; one horizontal and one vertical.

<html>
<head>
  <title>orient example</title>
  <style type="text/css">
    .vert {
      -moz-orient: vertical;
      width: 16px;
      height: 150px;
    }
  </style>
</head>
<body>
  <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>
</body>
</html>

View the live example

orient-progress.png

Specifications

  • Not 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) Not supported Not supported Not supported
auto value Not supported 21.0 (21.0) Not supported Not supported Not supported
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support Not supported 6.0 (6.0) Not supported Not supported Not supported
auto value Not supported 21.0 (21.0) Not supported Not supported Not supported

Gecko notes

In Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), there's 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).

See also

Document Tags and Contributors

Contributors to this page: Sheppy
Last updated by: Sheppy,
Hide Sidebar