Test 1: a horizontal ruler...
...and here's some text that will line up below the horizontal ruler.
...and here's some text that shall line up below the middle-point of the vertical ruler.
Test 2: a horizontal ruler...
...and here's some text that will line up below the horizontal ruler.
...and here's some text that shall line up below the middle-point of the vertical ruler.
Test 3: a horizontal ruler...
...and here's some text that will line up below the horizontal ruler.
...and here's some text that shall line up below the middle-point of the vertical ruler.
hr {width: 90%;
height: 0;
border: none;
border-bottom: 2px dashed #fff;
display: block;
}
hr.verticalis1 {
height: 1000px;
padding-bottom: 1000px;
border: none;
border-left: 2px dashed #c90;
width: 0;
margin: -1000px auto;
}
hr.verticalis2 {
height: 2000px;
border: none;
border-left: 2px dashed #c70;
width: 0;
margin: -1000px auto;
}
hr.verticalis3 {
padding-top: 2000px;
border: none;
border-left: 2px dashed #c50;
width: 0;
margin: -1000px auto;
}
Internet Explorer 6 fails all tests, as <hr /> can't be styled vertically to any degree.
Gecko, all windows-versions, fail test 1, as height and padding aren't added together. No problems with test 2 and 3, where only one property is applied.
Opera, 7.54 - 9.01, on windows) handles all tests well.