| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> |
| <html> |
| <head> |
| <title>CSS 2.1 Test Suite: Order of counters in out-of-flow content</title> |
| <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#counters"> |
| <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#propdef-content"> |
| <link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#counter"> |
| <style type="text/css"> |
| |
| ul { display: block; margin: 0; padding: 0; counter-reset: c; } |
| li { counter-increment: c; } |
| li, div { display: block; margin: 0; padding: 0; |
| width: 3em; border: thin solid; } |
| li:before, div:before { content: counter(c); } |
| |
| #four { border: none; } |
| #four:before { content: none; } |
| |
| #two { float: left; } |
| #three { position: relative; } |
| #four { position: relative; } |
| #four div { position: absolute; left: 8em; } |
| #six { position: absolute; top: 5em; left: 12em; } |
| #eight { position: fixed; top: 8em; left: 4em; } |
| |
| </style> |
| </head> |
| <body> |
| |
| <p>You should see nine boxes below, each just containing a unique |
| multiple of eleven, from 11 to 99, and nothing else.</p> |
| |
| <ul> |
| <li id="one">1</li> |
| <li id="two">2</li> |
| <li id="three">3</li> |
| <li id="four"><div>4</div></li> |
| <li id="five">5</li> |
| <li id="six">6</li> |
| <li id="seven">7</li> |
| <li id="eight">8</li> |
| <li id="nine">9</li> |
| </ul> |
| |
| </body> |
| </html> |
