hacktests.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"			"http://www.w3.org/TR/REC-html40/strict.dtd"><html><head>	<title>Untitled</title><style type="text/css"><!--div {background: gray; margin: 1em 0; padding: 1em 50px;}div.valid {background: rgb(50%,100%,50%);}div.mostlyvalid {background: rgb(75%,100%,50%);}div.invalid {background: rgb(100%,50%,50%);}#box0 {	width:400px; 	voice-family: "\"}\""; 	voice-family:inherit;	width: 300px;}#box1 {	width: 400px;	w\idth: 300px;}#box2 {	width: 400px;	wi\44th: 300px;}#box3 {	width: 400px; /* ie 5 */ //invalid comment number one	width: 300px; /* ie 6 */ //invalid comment number two}#box4 {width: 400px; /* ie 5 */ }#box4 {width: 300px; /* ie 6 */ }		--></style></head><body id="www-meyerweb-com" class="css"><div style="width: 400px; padding: 1em 0; background: gray;">Any workable hack will result a box the same width as this one (400px) in <strong>all</strong> browsers.  Any green-tinged hack validates; any red-tinged hack does not.  Apologies to the red-green colorblind among us.</div><div id="box0" class="valid">"Box Model Hack" using <code>voice-family</code> (validates)</div><div id="box1" class="mostlyvalid">"Simplified Box Model Hack" escaping one character (validates <em>unless</em> character in the range a-f is escaped)</div><div id="box2" class="valid">escape-encoding a character (validates)</div><div id="box3" class="invalid"><code>//</code> comments (does <strong>not</strong> validate)</div><div id="box4" class="valid">simple redefining of value (validates)</div></body></html>