Verticle Rule

Web browsers have given us some very interesting tools to work with. Frames, Tables, Fonts, Images, Scripting languages, ..the list goes on and on.

Overtime, these tools have been hammered out to be more useful for the public.

However a number of elements have been left out.. Long forgotten, rarely used, even though supported by everyone. An example of an element is <hr>:


Horizonal Rule is used to divide information. It was the first visual way to divide something before borders were introduced.

In the current day and age, most people don't use Horizonal Rules. They opt for borders and images instead. Still, horizonal rules have come a long way:


One of the biggest unresolved issues with Horizonal Rule is its lacking counter part: Vertical Rule. In the old days, as hard as you try, you would not get a verticle line to appear correctly. People struggled with this day in day out, until they gave up and used an image instead. Bringing up the old, I decided to take a stab at it with new technology. After a few twists and turns, I got to know browser's ability to render CSS a bit better. Most important, I got an understanding of the limitations of Internet Explorer. The following verticle rule shows up correctly even in Internet Explorer 5.5:

Vertical Rule: →

Under the hood, it's a highly styled div. Advocates of pure code who are looking for code that uses <hr> instead of <div>. Here you go:

HR Vertical Rule: →

Even better, <vr>:

VR: →

However, Internet Explorer only supports the first one. Only the most current browsers support the last one. In any case, they all use the same style:

vr,.vr
{
	display:inline;
	height:100%;
	width:1px;
	border:1px inset;
	margin:5px
}
		

Hope this helps at least one soul out there...

Veniamin

Edit : It's "soul" not "sole". Thanks for the anonymous tip. I'm glad this actually helped someone.

Main Veniamin Page