If your are experienced with CSS or have coded a website before, you have probably heard of CSS resets CSS resets are chunks of CSS code designed to make life easier on the coder/designer when coding the website. CSS resets are an extremely useful tool in making your site cross browser comptaible. Today, we will have a look at 6 popular CSS reset techniques.

1. Generic Reset

 * {
	padding: 0;
	margin: 0;
	border: 0;
	}

The above is the most commonly seen reset, which simply resets the margins, padding, and takes away any default borders (usually on images). A variation of this generic reset can be seen below:

* {
	vertical-align: baseline;
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
	}

2. Chris Poteet’s Reset

* {
	vertical-align: baseline;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: none;
	padding: 0;
	margin: 0;
	}
body {
	padding: 5px;
	}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
	margin: 20px 0;
	}
li, dd, blockquote {
	margin-left: 40px;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}

Be sure to carefully note some of the specific margins on the above reset and set them to your taste.

3. Yahoo’s CSS Reset

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	padding: 0;
	margin: 0;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
fieldset,img {
	border: 0;
	}
address,caption,cite,code,dfn,em,strong,th,var {
	font-weight: normal;
	font-style: normal;
	}
ol,ul {
	list-style: none;
	}
caption,th {
	text-align: left;
	}
h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
	font-size: 100%;
	}
q:before,q:after {
	content:'';
	}
abbr,acronym { border: 0;
	}

And you thought Yahoo didnt do anything productive. I am actually a big fan of this reset and have used it in the past with nice results. I especially like the use of the :before and :after pseudo elements, if only IE would support them!

4. Eric Meyers Reset

html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
	vertical-align: baseline;
	font-family: inherit;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	outline: 0;
	padding: 0;
	margin: 0;
	border: 0;
	}
 
:focus {
	outline: 0;
	}
body {
	background: white;
	line-height: 1;
	color: black;
	}
ol, ul {
	list-style: none;
	}
 
table {
	border-collapse: separate;
	border-spacing: 0;
	}
caption, th, td {
	font-weight: normal;
	text-align: left;
	}
/* remove possible quote marks (") from <q> &
<blockquote> */
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
	}
blockquote, q {
	quotes: "" "";
	}

Eric Meyers CSS reset is my favorite reset of them all, it accounts for nearly all elements and there is even a page dedicated to the most current versions of this reset.

5. Condensed Meyers Reset

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td {
	padding: 0;
	margin: 0;
	}
fieldset, img {
	border: 0;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
ol, ul {
	list-style: none;
	}
address, caption, cite, code, dfn, em, strong, th, var {
	font-weight: normal;
	font-style: normal;
	}
caption, th {
	text-align: left;
	}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-size: 100%;
	}
q:before, q:after {
	content: '';
	}
abbr, acronym {
	border: 0;
	}

A condensed version of the larger Meyer Reset.

6. Tantek’s Reset

 
 
 
 

:link, :visited {
	text-decoration: none;
	}
ul, ol {
	list-style: none;
	}
h1, h2, h3, h4, h5, h6, pre, code, p {
	font-size: 1em;
	}
ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, pre,
form, body, html, p, blockquote, fieldset, input {
	padding: 0;
	margin: 0;
	}
a img, :link img, :visited img {
	border: none;
	}
address {
	font-style: normal;
	}

Happy Coding!

Technorati Tags: chris poteet's reset, coding, condensed meyers reset, CSS, css code, css reset, eric meyers reset, generic reset, reset techniques, tantek's reset

How to use

// Wait for the content ...
window.addEvent('domready', {

// Default options, reuse this Roar
var queue = new Roar();

});

Compatibility

Fully compatible with all A-Grade Browsers (Internet Explorer 6+, Opera 9, Firefox 1.5+ and Safari 2+)

Planned

• Support for centered position
• More notification types and easier customization

Requirements

MooTools JavaScript Framework

Download MooTools 1.2 with at least these modules:

• Element.Dimensions
• Fx.Tween
• Fx.Morph
• Selectors
• DomReady (facultative)

Download

• Roar.js
• Roar.css

Changelog

1.0.1 (2008-04-26)

• Added: Roar::inject which contains all the basic create-notification logic, alert only builds the elements. Add more handlers (images, mp3-player like, whatever) on your own and send the cool ones to me!
• Added: Added queued demo and improved ticker demo
• Added: Roar::empty to remove all open items
• Changed: Removed handler argument for alert, just get the last item from Roar::items and add custom events.
• Changed: Removed orphaned title option, no default title possible

1.0 (2008-01-19)

• Added: New Events onShow, onHide (arguments element and index) and onRender
• Fixed: Adapted new MooTools Dimensions, follows window scrolling again.
• Fixed: Added fallback for IE regarding opaque background.

1.0 pre (2008-01-03)

• Initial working version for MooTools 1.2

Roar is a notification widget that streamlines incoming messages, such as updates or errors, without distracting the user from their browser experience or breaking their work-flow by displaying obtrusive alerts. Roar is inspired by Growl, the notification system for Mac OS X and is realised with MooTools.

Showcases

• Never-ending Feed Showing feed items with link but without end.
• Random Alerts Random notifications for all 4 corners of the document.
• Update Ticker Timed updates on events.

Features

• Show any informations you want and style them with class-names.
• Messages are queued and interactive
  • Hover them to read them longer
  • Add optional click-interaction to provide more information
• Customize them via external CSS to your own needs.

JSGallery is a very nice AJAX image gallery built with Mootools.

Look & effects of the script is configurable. It supports browsing with keyboard between images and also pages.

Features of this AJAX gallery:

• nice transitions for page change, image select, etc.
• supports easy to build no-script version
• preloads images with separate indicators (optional)
• a bunch of options to change the default styles and bevaviours
• visibility of prev/next handles is controlled by mouse distance
• use the arrow keys to go to previous/next image
• use number keys to go to a certain page (beginning with 1)
• prevents too fast change of images (ugly effect interruption)

• Filed under: Gallery, Goodies, Other License

Technorati Tags: class, customizable, dependency, download, esteak, gallery, images, javascript, mootools, plugin, script, scrolling, unobtrusive

Technorati Tags: click trough gallery, designer portfolio script, free download, free php script, php gallery

Technorati Tags: browser, effect, fla, flash photo, free web resources, open-source, swf, web resources