HTML

>div id="blokken">
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
	>div class="blok-item">
		>p>lorem ipsum>/p>
	>/div>
>/div>

CSS

#blokken {
width: 540px;
}
.blok-item {
width: 100px;
background-color: #aaa;
margin: 0 10px 10px 0;
}

Jquery

<![CDATA[
var items = $('.blok-item').length;
for(var i = 4;i < items;i = i + 5){
  $('.blok-item:eq('+i+')').css("margin-right","0");
}
]]>

HTML

<ul id="menu">
 <li><a href="#"> lorem </a></li>
  <li class="folder">
   <a class="submenu" href="#"> adipiscing </a>
    <ul>
     <li><a href="#"> dolor </a></li>
     <li class="folder">
      <a class="submenu" href="#"> consectetuer</a>
    <ul>
      <li><a href="#"> elit </a></li>
      <li><a href="#"> ipsum </a></li>
      <li><a href="#"> Donec </a></li>
    </ul>
   </li>
   <li><a href="#"> vestibulum </a></li>
  </ul>
  </li>
  <li class="folder">
   <a class="submenu" href="#"> consectetuer</a>
   <ul>
    <li><a href="#"> elit </a></li>
    <li><a href="#"> ipsum </a></li>
    <li><a href="#"> Donec </a></li>
   </ul>
  </li>
  <li><a href="#"> sit amet </a></li>
 </ul>

CSS

body {
behavior: url("csshover3.htc");
}
ul, li, a {
margin:0;
padding:0;
border:0;
}
ul {
width:150px;
border:1px solid #9d9da1;
background:white;
list-style:none;
display:block;
margin:0;
padding:0;
}
li {
position:relative;
padding:1px;
font-size: 1.2em;
padding-left:26px;
background:url("images/item_moz.gif") no-repeat;
z-index:9;
display:block;
}
li.folder { background:url("images/item_folder.gif") no-repeat; }
li.folder ul {
position:absolute;
left:120px; /* IE */
top:5px;
}
li.folder>ul { left:140px; } /* others */
ul a {
padding:2px;
border:1px solid white;
text-decoration:none;
display:block;
color:gray;
font-weight:bold;
width:100%; /* IE */
}
li>a { width:auto; } /* others */
li a.submenu {
background:url("images/sub.gif") right no-repeat;
}
ul a:hover {
border-color:gray;
background-color:#bbb7c7;
color:black;
}
li.folder a:hover {
background-color:#bbb7c7;
}
li.folder:hover { z-index:10; }
ul ul, li:hover ul ul {
display:none;
}
li:hover ul, li:hover li:hover ul {
display:block;
}

Sla volgende complete code op in een bestand met extensie .htc

JavaScript/HTC

<public:attach event="ondocumentready" onevent="CSSHover()" />
<script>
//<![CDATA[
/**
 *	Whatever:hover - V3.00.081222
 *	------------------------------------------------------------
 *	Author  - Peter Nederlof, http://www.xs4all.nl/~peterned
 *	License - http://creativecommons.org/licenses/LGPL/2.1
 *
 *	Whatever:hover is free software; you can redistribute it and/or
 *	modify it under the terms of the GNU Lesser General Public
 *	License as published by the Free Software Foundation; either
 *	version 2.1 of the License, or (at your option) any later version.
 *
 *	Whatever:hover is distributed in the hope that it will be useful,
 *	but WITHOUT ANY WARRANTY; without even the implied warranty of
 *	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 *	Lesser General Public License for more details.
 *
 *	howto: body { behavior:url("csshover3.htc"); }
 *	------------------------------------------------------------
 */
window.CSSHover = (function(){
var REG_INTERACTIVE = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active|focus))/i,
REG_AFFECTED = /(.*?)\:(hover|active|focus)/i,
REG_PSEUDO = /[^:]+:([a-z-]+).*/i,
REG_SELECT = /(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi,
REG_CLASS = /\.([a-z0-9_-]*on(hover|active|focus))/i,
REG_MSIE = /msie (5|6|7)/i,
REG_COMPAT = /backcompat/i;
var CSSHOVER_PREFIX = 'csh-';
var CSSHover = {
elements: [],
callbacks: {},
init:function() {
// don't run in IE8 standards; expressions don't work in standards mode anyway,
// and the stuff we're trying to fix should already work properly
if(!REG_MSIE.test(navigator.userAgent) && !REG_COMPAT.test(window.document.compatMode)) return;
var sheets = window.document.styleSheets, l = sheets.length;
for(var i=0; i<l; i++) {
this.parseStylesheet(sheets[i]);
}
},
parseStylesheet:function(sheet) {
if(sheet.imports) {
try {
var imports = sheet.imports, l = imports.length;
for(var i=0; i<l; i++) {
this.parseStylesheet(sheet.imports[i]);
}
} catch(securityException){
}
}
try {
var rules = sheet.rules, l = rules.length;
for(var j=0; j<l; j++) {
this.parseCSSRule(rules[j], sheet);
}
} catch(securityException){
}
},
parseCSSRule:function(rule, sheet) {
var select = rule.selectorText;
if(REG_INTERACTIVE.test(select)) {
var style = rule.style.cssText,
// eg: "div li:hover" >>  "div li"
affected = REG_AFFECTED.exec(select)[1],
// that pseudo is needed for a classname, and defines the type of interaction (focus, hover, active)
// eg: "li:hover" >> "onhover"
pseudo = select.replace(REG_PSEUDO, 'on$1'),
// the new selector is going to use that classname in a new css rule,
// since IE6 doesn't support multiple classnames, this is merged into one classname
// eg: "li:hover" >> "li.onhover",  "li.folder:hover" >> "li.folderonhover"
newSelect = select.replace(REG_SELECT, '.$2' + pseudo),
className = REG_CLASS.exec(newSelect)[1];
var hash = affected + className;
if(!this.callbacks[hash]) {
sheet.addRule(affected, CSSHOVER_PREFIX + className + ':expression(CSSHover(this, "'+pseudo+'", "'+className+'"))');
this.callbacks[hash] = true;
}
sheet.addRule(newSelect, style);
}
},
patch:function(node, type, className) {
var property = CSSHOVER_PREFIX + className;
if(node.style[property]) {
node.style[property] = null;
}
if(!node.csshover) node.csshover = [];
if(!node.csshover[className]) {
node.csshover[className] = true;
var element = new CSSHoverElement(node, type, className);
this.elements.push(element);
}
return type;
},
unload:function() {
try {
var l = this.elements.length;
for(var i=0; i<l; i++) {
this.elements[i].unload();
}
this.elements = [];
this.callbacks = {};
} catch (e) {
}
}
};
window.attachEvent('onbeforeunload', function(){
CSSHover.unload();
});
var CSSEvents = {
onhover:  { activator: 'onmouseenter', deactivator: 'onmouseleave' },
onactive: { activator: 'onmousedown',  deactivator: 'onmouseup' },
onfocus:  { activator: 'onfocus',      deactivator: 'onblur' }
};
function CSSHoverElement(node, type, className) {
this.node = node;
this.type = type;
var replacer = new RegExp('(^|\\s)'+className+'(\\s|$)', 'g');
this.activator =   function(){ node.className += ' ' + className; };
this.deactivator = function(){ node.className = node.className.replace(replacer, ' '); };
node.attachEvent(CSSEvents[type].activator, this.activator);
node.attachEvent(CSSEvents[type].deactivator, this.deactivator);
}
CSSHoverElement.prototype = {
unload:function() {
this.node.detachEvent(CSSEvents[this.type].activator, this.activator);
this.node.detachEvent(CSSEvents[this.type].deactivator, this.deactivator);
this.activator = null;
this.deactivator = null;
this.node = null;
this.type = null;
}
};
return function(node, type, className) {
if(node) {
return CSSHover.patch(node, type, className);
} else {
CSSHover.init();
}
};
})();
// ]]>
</script>

HTML

<abbr title="Cascading Style Sheets">CSS</abbr>

CSS

abbr, span.abbr {
cursor: help;
border-bottom: 1px dotted #000;
}

JavaScript

<![CDATA[
function styleAbbr() {
var oldBodyText, newBodyText, reg
if (isIE) {
oldBodyText = document.body.innerHTML;
reg = /<abbr([^>]*)>([^<]*)<\/abbr>/g;
newBodyText = oldBodyText.replace(reg, '<abbr $1><span class=\"abbr\" $1>$2</span></abbr>');
document.body.innerHTML = newBodyText;
}
}
window.onload = function(){
styleAbbr()
};
isIE = (document.all) ? true:false;
]]>

HTML

<!--[if IE 6]>
hier komt de css voor IE6
<![endif]-->

CSS

.foo {
    _background: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='afbeelding.png', sizingMethod='scale');
}

Belangrijk

Het pad naar de afbeelding in de CSS, is ten opzichte van het HTML document, niet ten opzichte van de CSS.

Voor moderne browsers

HTML

<div id="fixed">DIV in position: fixed;</div>

CSS

#fixed {
position: fixed;
left: 0;
top: 0;
width: 100%;
padding: 10px;
background: gray;
}

Voor Internet Explorer 6

HTML

<div id="fixed">DIV in position: fixed;</div>

CSS

<!--[if lte IE 6]>
<style type="text/css" media="screen">
#fixed {
position: absolute;
top: expression((document.documentElement.scrollTop || document.body.scrollTop) + this.offsetHeight - this.offsetHeight);
}
</style>
<![endif]-->

HTML

<p id="content">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

CSS

#content {
    height:auto ! important;
    min-height:200px;
    height:200px;
    border: 1px solid #999;
}