Alternate Box Model Hacks Height Test

September 2002

This page will test the reactions of your browser to three new box model hacks. For a detailed description of the syntax and how the hacks work please visit the alternate box model hacks page.

The blocks below will test specifically if the hacks will correctly provide your browser the correct height. You may also wish to test how the hacks do fare on the width property.

CSS for the various test blocks as follows:

		div
		{
			float: left;
			margin: 1em;
			width: 100px;
			font-family: monospace;
			color: black;
		}

		div.px0
		{
			padding: 0;
			height: 250px;
			background: #ccc;
		}
		
		div.px1
		{
			border-top: 20px solid #999;
			border-bottom: 20px solid #999;
			padding: 30px 0;
			height: 150px;
			background: #ccc;
		}

		div.px-tech1
		{
			border-top: 20px solid #0c0;
			border-bottom: 20px solid #0c0;
			padding: 30px 0;
			
			height: 250px; 
			height/* */:/**/150px; 
			height: /**/150px;
			
			background: #cfc;
		}

		div.px-tech2
		{		
			border-top: 20px solid #0c0;
			border-bottom: 20px solid #0c0;
			padding: 30px 0;
			
			height: 150px !important;
			height: 250px;
			height/**/:/**/150px;
			
			background: #cfc;
		}

		div.px-tech3
		{		
			border-top: 20px solid #0c0;
			border-bottom: 20px solid #0c0;
			padding: 30px 0;
			
			height: 150px !important;
			height /**/: 250px; 
			
			background: #cfc;
		}