Normale code

HTML

<ul>>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
</ul>

CSS

ul {
    list-style: none;
}
ul li a {
    display: block;
    width: 130px;
    height: 30px;
    text-align: center;
    color: #fff;
    float: left;
    background: #95CFEF;
    border: solid 1px #36F;
    margin: 30px 5px;
}

Fixed CSS voor Internet Explorer

CSS

ul li {
    float: left;
}

CSS

Conditionele CSS voor IE6

Conditionele CSS voor IE7

HTML

<blockquote cite="http://www.somewebsite.com/jan">
<p>They went in single file, running like hounds on a strong scent,
and an eager light was in their eyes. Nearly due west the broad
swath of the marching Orcs tramped its ugly slot; the sweet grass
of Rohan had been bruised and blackened as they passed.</p>
</blockquote>

CSS

blockquote:before, blockquote:after
{
  content: "";
}

JavaScript oplossing voor IE6

<![CDATA[
function fixIEQuotes()
{
  var objQuotes = document.getElementsByTagName('blockquote');
  var strOpen, strClose;
  for (var i=0; i<objQuotes.length; i++)
  {
    if (isNested(objQuotes[i]))
    {
      // Double-quotes
      strOpen = document.createTextNode('\u2018');
      strClose = document.createTextNode('\u2019');
    }
    else
    {
      // Single-quotes
      strOpen = document.createTextNode('\u201c');
      strClose = document.createTextNode('\u201d');
    }
    // Insert quotation marks around quote
    objQuotes[i].parentNode.insertBefore(strOpen, objQuotes[i]);
    objQuotes[i].appendChild(strClose);
  }
  objQuotes = null;
}
function isNested(objElement)
{
  var objParent = objElement;
  do // Check if nested quote
  {
    objParent = objParent.parentNode;
    if (objParent.tagName && objParent.tagName.toLowerCase() == 'blockquote')
      return true;
  } while (objParent.parentNode);
  return false;
}
]]>

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.

HTML

<div id="v3">
<div class="b1">
	<strong></strong>
</div>
<div class="b2">
	<strong>
		<em>
			<span></span>
		</em>
	</strong>
</div>
<div class="b3">
	<strong>
		<em></em>
	</strong>
</div>
<div class="b4">
	<strong></strong>
</div>
<div class="b5">
	<strong></strong>
</div>
<div class="text">
	<h1>Lorem ipsum</h1>
	<p>tekst komt hierin te staan</p>
</div>
<div class="b5">
	<strong></strong>
</div>
<div class="b4">
	<strong></strong>
</div>
<div class="b3">
	<strong><em></em></strong>
</div>
<div class="b2">
	<strong>
		<em>
			<span></span>
		</em>
	</strong>
</div>
<div class="b1">
	<strong></strong>
</div>
</div>

CSS

* {margin: 0; padding: 0}
body {
  font: 14px/17px "Trebuchet MS", tahoma, arial;
	text-align: justify;
}
a {color: #0094D6}
p {
	text-align: center;
	margin-top: 30px;
	font-weight: bold;
	font-size: 13px;
}
#v3 {
  width: 500px;
	margin: 30px auto 15px;
}
h1 {
	font-size: 20px;
	font-weight: normal;
	text-align: center;
	padding: 9px 0 14px;
}

#v3 h1 {color: #00AA00;}
.text {
	border: 1px solid #B0BCC2;
	border-width: 0 1px;
	padding: 5px 10px;
}

.b1, .b2, .b3, .b4, .b5,
.b1 em, .b2 em, .b3 em, .b4 em, .b5 em,
.b1 strong, .b2 strong, .b3 strong, .b4 strong, .b5 strong,
.b1 span, .b2 span, .b3 span, .b4 span, .b5 span {
	height: 1px;
	font-size: 1px;
	overflow: hidden;
	border-style: solid;
	border-width: 0 1px;
	display: block;
}
.b1 {
  margin: 0 2px;
	background: #EBEEF0;
	border: none;
}
.b1 strong {
 margin: 0 1px;
 background: #B8C3C8;
 border-color: #CBD3D7;
}
.b2 {margin: 0 1px;	border-color: #D6DCDF;}
.b2 strong {border-color: #B8C3C8;}
.b2 em {border-color: #E4E8EA;}
.b2 span {border-color: #F7F8F9;}
.b3 {border-color: #EBEEEF;}
.b3 strong {border-color: #BCC6CB;}
.b3 em {border-color: #F9FAFB;}
.b4 {border-color: #CAD2D6;}
.b4 strong {border-color: #E5E9EB;}
.b5 {border-color: #B5C0C6;}
.b5 strong {border-color: #FAFBFB;}

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;
}

HTML

<input type="submit" class="submit" value="Submit Form" />

CSS

.submit {
  background: transparent;
  border-top: 0;
  border-right: 0;
  border-bottom: 1px solid #00F;
  border-left: 0;
  color: #00F;
  display: inline;
  margin: 0;
  padding: 0;
  cursor: pointer; /* IE does not display a pointer */
}

*:first-child+html .submit { /* hack needed for IE 7 */
	border-bottom: 0;
	text-decoration: underline;
}

* html .submit {	/* hack needed for IE 5/6 */
	border-bottom: 0;
	text-decoration: underline;
}