• Firefox 3.5+
• Safari 3+
• Google Chrome
• Opera 10.50
• Internet Explorer 5.5+

CSS

.shadow {
  -moz-box-shadow: 3px 3px 4px #000; /* Firefox/Mozilla */
  -webkit-box-shadow: 3px 3px 4px #000; /*Safari/Chrome */
  box-shadow: 3px 3px 4px #000; /* Opera & hoe het zou moeten */
  /* Voor IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
  /* Voor IE 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

Nartuurlijk zal je de ms-filter & filter via conditional comments laden?

HTML

<div id="vertgraph">
	<ul>
	<li class="critical" style="height: 150px;">22</li>
	<li class="high" style="height: 80px;">7</li>
	<li class="medium" style="height: 50px;">3</li>
	<li class="low" style="height: 90px;">8</li>
	<li class="info" style="height: 40px;">2</li>
	</ul>
</div>

CSS

#vertgraph {
width: 378px;
height: 207px;
position: relative;
border: 1px solid #ab977c;
background-color: #eee;
}
#vertgraph ul {
width: 378px;
height: 207px;
margin: 0;
padding: 0;
}
#vertgraph ul li {
position: absolute;
width: 28px;
height: 160px;
bottom: 34px;
padding: 0;
margin: 0;
list-style: none;
border: 1px solid #ab977c;
background-color: #c2b39c;
text-align: center;
font-weight: bold;
color: #fff;
line-height: 2.5em;
}
#vertgraph li.critical {
left: 24px;
}
#vertgraph li.high {
left: 101px;
}
#vertgraph li.medium {
left: 176px;
}
#vertgraph li.low {
left: 251px;
}
#vertgraph li.info {
left: 327px;
}

HTML

<dl>
<dt>Love Life</dt>
<dd>
	<div style="width:25%;">
		<strong>25%</strong>
	</div>
</dd>
<dt>Education</dt>
<dd>
	<div style="width:55%;">
		<strong>55%</strong>
	</div>
</dd>
<dt>War Craft 3 Rank</dt>
<dd>
	<div style="width:75%;">
		<strong>75%</strong>
	</div>
</dd>
</dl>

CSS

dl {
margin: 0;
padding: 0;
}
dt {
position: relative; /* IE is dumb */
clear: both;
display: block;
float: left;
width: 104px;
height: 20px;
line-height: 20px;
margin-right: 17px;
font-size: .75em;
text-align: right;
}
dd {
position: relative; /* IE is dumb */
display: block;
float: left;
width: 197px;
height: 20px;
margin: 0 0 15px;
background-color: #acc6ee;
}
*:first-child+html dd { float: none; } /* hack for ie7 */
* html dd { float: none; } /* hack for ie6 */
dd div {
position: relative;
background-color: #b3eeac;
height: 20px;
width: 75%;
text-align:right;
}
dd div strong {
position: absolute;
right: -5px;
top: -2px;
display: block;
background-color: #000;
height: 24px;
width: 5px;
text-align: left;
text-indent: -9999px;
overflow: hidden;
}

HTML

<div class="graph">
<strong class="bar" style="width: 24%;">24%</strong>
</div>

CSS

.graph {
position: relative; /* IE is dumb */
width: 200px;
border: 1px solid #B1D632;
padding: 2px;
}
.graph .bar {
display: block;
position: relative;
background: #B1D632;
text-align: center;
color: #333;
height: 2em;
line-height: 2em;
}
.graph .bar span {
position: absolute;
left: 1em;
}

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

<div id="wrap">
<div id="main" class="clearfix">
<p>content</p>
</div>
</div>
<div id="footer">
 <p>content</p>
</div>

CSS

* {margin:0;padding:0;}
/* must declare 0 margins on everything,
also for main layout components use padding,
not vertical margins (top and bottom) to add spacing,
else those margins get added to total height
and your footer gets pushed down a bit more,
creating vertical scroll bars in the browser */
html, body, #wrap {
height: 100%;
}
body > #wrap {
height: auto;
min-height: 100%;
}
#main {
padding-bottom: 150px; /* must be same height as the footer */
}
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
/* CLEAR FIX*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

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

HTML

<span class="strike">strikethru</span>

CSS

.strike {
text-decoration: line-through;
}

Standaard voorbeeld

div.boxtest {
border:20px solid;
padding:30px;
background: #ffc;
width:300px;
}

Volgens de regels zou dit nu een box moeten zijn van 400 px breed = 20+30+300+30+20 = 400

Internet Explorer 6 zal deze CSS niet juist begrijpen en plaatst de 20px boord (x2) en de 30px padding (x2) binnenin de actuele width van 300px, wat als resultaat heeft dat de width nu nog maar 200px breed is = 300-20-30-30-20 = 200!!

Oplossing

Om dit op te lossen moeten we Internet Explorer iets gaan wijsmaken, namelijk dat de box eigenlijk 400px breed moet zijn (dus met border en padding 300+20+30+20+30), en daarnaa geven we de echte waarde voor alle andere browsers die wel correct met de box model kunnen omgaan.

Zo zouden we het doen voor moderne browsers:

div.content {
border:20px solid;
padding:30px;
background: #ffc;
width:300px;
}

Dan leiden we Internet Explorer 6 om de tuin door eerste de foutieve waarde op te geven (400) en sluiten zogezegd af met “\”}\””, en daarna geven we de echte waarde op (daar het toch de regel is dat de 2de bepaling de 1ste overruled) :

div.content {
border:20px solid;
padding:30px;
background: #ffc;
width:400px;
voice-family: "\"}\"";
voice-family:inherit;
width:300px;
}

Resultaat:

Crossbrowser en valide CSS!