Basic CSS Template

A basic CSS template for use my barebones HTML layouts.

/**
 * My main CSS
 * @author Your name dd/mm/yyyy
 * @requires reset.css
 */
 
/**
------------------------------------------------- layout
**/
 
 
/**
------------------------------------------------- typography
**/
 
 
/**
------------------------------------------------- forms
**/
 
 
/**
------------------------------------------------- tables
**/
 
 
/**
------------------------------------------------- lists
**/

HTML5 centered CSS layout with a sticky page footer

Update: This post is way out of date now – do yourself a favour and look into using something like twitter bootstrap

A barebones HTML5 layout with a sticky page footer. Just change the CSS to match your requirements.

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>An HTML5 Document with a sticky footer</title>
	<style>@import "css/reset.css"; </style>
	<style>@import "css/main.css"; </style>
  </head>
  <body>
	<div id="root">
		<header>
			The page header
		</header>
		<section>
			 <h1>Example</h1>
			<p>This is an example HTML document.</p>
			<p>Put your content here</p>
		</section>
 
	</div>
   <footer>
		Sticky footer
	</footer>
  </body>
</html>
html {
	background: #CCC;
	height: 100%;
}
 
body {
	background: #FFF;
	width: 600px;
	margin: 0 auto;
	height: 100%;
 
}
 
body > div#root {
	height: auto;
	min-height: 100%;
}
 
div#root {
	height: 100%;
}
 
header {
	background: #EFF;
	display: block;
	height: 100px;
}
 
footer {
	background: #FEF;
	display: block;
	height: 100px;           /* set the footer height */
	margin-top: -100px;      /* match footer height */
}
 
section {
	background: #FFE;
	display: block;
	padding-bottom: 100px;   /* match footer height */
}

Note i have also imported my reset CSS.

If you want a header and footer background image to stretch across the page, consider using CSS3 multiple background images. Otherwise you will need to create and inner wrapper for each section.

Fixing the Internet Explorer BUTTON form submission bug

Internet Explorer 6/7 incorrectly handle a form submission with the <button/> element.

Consider <button name="action" value="next">Go to step 3</button> <button name="action" value="back">Back to step 1</button>

What should happen is the value of the button used clicked by the user should be posted with the action parameter.

IE however posts the inner HTML of the button. In the case of IE6 it posts ALL of the button parameters – even less helpful!

If you get a reference to the DOM element, and call the button.getAttribute('value') will still return the inner HTML of the button. Basically, IE is completely mangled.

I use the following function to fix IE, note it relies on the jQuery library.

/**
 * fix the HTML BUTTON submission bug.
 * 
 * Problem: IE6/7 ignore the value attribute of button elements and
 * instead submit the innerHTML of the button. Even using the JavaScript
 * getAttribute('value') method will return the incorrent value in IE6.
 * 
 * To fix this issue, add the BUTTON.id property to the below map, with
 * the desired value propery.
 * 
 * The script will automatically execute on DOM READY and search for any
 * BUTTON elements within a web form. If found, it will:
 * 
 * 1. Rename the name property so 'foo' becomes '_foo' (this workarounds
 *    the IE6 issue of submitting all of the BUTTON elements
 * 2. Add a click listener to inctercept the click.
 * 3. Look up the value of the element ID in the map object
 * 4. Set the dynamically generated hidden field VALUE to the desired
 *    value
 * 5. Submit the form.
 * 
 * @param {String} name - The name property of the buttons to process
 */
 
function fixButtonSubmit(name)
{
	var map = {
		buttonSubmit: 'next',
		buttonBack: 'back'
	};
 
	// fix the button submission bug
	$('form').each(function () {
		var that = this,
			fixSubmit = false;
 
		// prepend button names
		$(this).find('button[name='+name+']').each(function () {
			this.name = '_'+name;
			fixSubmit = true;
 
			// intercept click handler
			$(this).click(function () {
				// set the hidden input to value specified in the map
				$('input#'+name).val(map[this.id]); 
				that.submit();
				return false;
			});
		});
 
		// add hidden field to the form
		if (fixSubmit) {
			$(this).append($('<input id="'+name+'" type="hidden" name="'+name+'" value="" />'));
		}
	});
}
 
$(function () {
 
	// return if not IE
	if (!$.browser.msie) {
		return;
	}
 
	// set browser version
	var isIE6 = false,
	    isIE7 = false,
	    isIE8 = false;
 
	switch ($.browser.version)
	{
	case '6.0':
		isIE6 = true;
		break;
	case '7.0':
		isIE7 = true;
		break;
	case '8.0':
		isIE8 = true;
		break;
	}
 
	if (isIE6 || isIE7)
	{
		fixButtonSubmit('action');
	}
});

An alternative non-javascript Solution would be to replace any BUTTON elements with INPUT submit elements. You only need to apply this to IE6/7, which you can target with IE conditional comments. See my post on targeting non-IE browsers with IE conditional comments.

Rounded corners with CSS

CSS3 brings us rounded corners with the CSS rule border-radius. At the time of writing, webkit and gecko based browsers offer this functionality with custom CSS rules.

Gecko (Firefox):

div {
   -moz-border-radius: 10px;
}
 
div {
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  -moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomleft: 10px;
}

Webkit (Safari, Chrome)

div {
   -webkit-border-radius: 10px;
}
 
div {
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
}

Valid xHTML Strict Template

A simple HTML template to create valid, xHTML 1.0 documents.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 
<script type="text/javascript" src="script.js"></script>
<style type="text/css">
 
</style>
</head>
<body>
 
<div id="root"></div>
</body>
</html>

template.html