It's a tricky subject, the <hr /> element. Like the <br /> element, it's syntactically odd and browsers have specific default styles for it that vary quite a bit. Since the goal is always to keep our HTML uncluttered, I thought I would explain how to work with this unruly piece of a document.

First, the HTML for this tutorial is always the following:

 - That's how the HTML specifications say we are to indicate a horizontal line, so that's all we want to use in the content layer. Presentation, on the other hand, will be a little more messy and unusual. First, let's remember the major browser quirks associated with the HR element, many of them from this article:
Internet Explorer allows color to define the background color, and gives it precedence over background-color
The border property does not behave correctly in Opera
The height property is (by default) broken in Safari

With these rendering issues in mind, the goal is to make our HR elements look like they have been cut into the page - a common visual effect used most notably by Apple:


Not that we should do everything Apple does, but they can whip up a mean UI.

To avoid this going on forever, here are the two bug fixes that need to be used to get things working across the major browsers:

Fixing the height property in Safari:

This one is simple, but not intuitive. For whatever reason, the height property is limited to a minimum of 3px in Safari. The easiest way to get around this is to set the max-height property to whatever the height of your HR needs to be. In our case, we're only using borders to style the element, so the max-height should be 0.

height: 0;

max-height: 0;

Fixing Opera's borders:

I recently needed to store user preferences for a JavaScript application (on amoebaOS) in a file. Since JavaScript's support for XML is not amazing and XML in general is just an under-performing format for data storage (in my opinion), I opted for a JSON-encoded string as a means of storing the preferences. I know there are many libraries out there that might have this same functionality (I believe this is implemented in JSON.stringify), I felt like it would be a chance to post my version of a JavaScript Object serialization method for the masses.

The goal was to have this code working perfectly without doing any intermediary testing, and that's what I did. The unserialize method is not elegant, but it's simpler than parsing manually and still safer than running a standard eval - you'll notice the dangerous global objects (or those that I could think of off the top of my head) are not available because the TinyJSON object declares internal variables that take precedence.

var TinyJSON = (function(){
	var window,top,self,parent,location,reload,back,forward,
		alert,confirm,prompt,stop,frames,document;
	
	function addslashes(t){
		return t.replace(/(\\*)'/gim,"$1$1\\'");
	}
	function strval(v) {
		switch((v.constructor.name+"").toLowerCase()) {
			case "number":
				return v+0;
			break;
			case "string":
				return "'" + addslashes(v).replace(/\r?\n/gim,'\\n') + "'";
			break;
			case "date":
				return "date("+v.getTime()+")";
			break;
			case "boolean":
				return v===true?"true":"false";
			break;
			case "array":
				var t = "[";
				for(var i=0; i<v.length; i++) {
					t += strval(v[i]) + ",";
				}
				return t.replace(/\,$/,'')+"]";
			break;
			case "object":
				return branch(v);
			break;
			default:
				return "null";
			break;
		}
	}
	function branch(obj) {
		var t = "{";
		for(var n in obj) {
			t += "\"" + n + "\":" + strval(obj[n]) + ",";
		}
		return t.replace(/\,$/,'')+"}";
	}
	
	var self = {
		serialize : function(obj) {
			return branch(obj);
		},
		unserialize : function(str) {
			function date(s) {
				var d = new Date();
				d.setTime(s+0);
				return d;
			}
			return eval('(' + str + ')');
		}
	};
	
	return self;
})();

You can serialize a JavaScript Object to its string representation as follows:

var obj = {
	type : "myObj",
	data : [
		123456,
		new Date()
	],
	fun : true,
	going : 11,
	parent : {
		type : "parentObj"
	}
};
var str = TinyJSON.serialize( obj );

You can convert a TinyJSON string back to object form as follows:

var str = "{\"type\":'myObj',\"data\":[123456,date(1251442681016)], ☟
	\"fun\":true,\"going\":11,\"parent\":{\"type\":'parentObj'}}";
var obj = TinyJSON.unserialize( str );