HTML

<script>
 for (x in document.write) { document.write(x);}
</script>

Misschien kan je met deze snippet wel een statement zetten voor je bezoekers van je website die nog steeds met IE6 je site bekijken??

Tip 1

HTML

<div id="outer">
	<div id="inner">
		<p>big floating contents</p>
	</div>
	<p>Main Content</p>
</div>

CSS

#outer {
overflow: auto;
height: 1%; /* for IE6 */
}

Tip 2

HTML

<div class="clearfix">
	<div class="floater">This text won't extend past the bottom of the "clearfix" div.</div>
</div>

CSS

.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE5/Mac \*/
* html .clearfix {
height: 1px;
}
.clearfix {
display: block;
}
/* End hide from IE5/Mac */

Tip 3

HTML

<div class="spacer"></div>

CSS

div.spacer {
clear: both;
}

Tip 4

HTML

<br />

CSS

br {
clear: both;
height:0;
font-size: 1px;
line-height: 0;
}

Tip 5

HTML

<div class="newBFC">
	<div class="floater">
	This text won't extend past the bottom of the "newBFC" div.
	</div>
</div>

CSS

.newBFC {
overflow: hidden;
_overflow: visible; /* not valid */
_overflow-x:hidden; /* not valid */
_height: 0; /* not valid */
}
/*\*//*/
.newBFC {display: inline-block;}
/**/

Soms kan dat in websites tot een “jump” (verspringen) leiden van je inhoud, wens je dit te voorkomen kun je voor Firefox de verticale scrollbar altijd tonen:

CSS

html {overflow:-moz-scrollbars-vertical;}

CSS3 (nog niet klaar!!)

CSS

#foo {
border-top-right-radius: 10px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 10px;
}
#foo {
border-radius: 5px; /*alle hoeken hetzelfde*/
}

Safari/webkit

CSS

#faa {
webkit-border-top-right-radius: 10px;
webkit-border-bottom-right-radius: 5px;
webkit-border-bottom-left-radius: 5px;
webkit-border-top-left-radius: 10px;
}
#faa {
webkit-border-radius: 5px; /*alle hoeken hetzelfde*/
}

FireFox/Mozilla

CSS

#fee {
moz-border-radius-topright: 10px;
moz-border-radius-bottomright: 5px;
moz-border-radius-bottomleft: 5px;
moz-border-radius-topleft: 10px;
}
#fee {
moz-border-radius: 5px; /*alle hoeken hetzelfde*/
}

Download afbeelding

Download volgende afbeelding:

HTML

<div id="wrapper">
<div class="container" id="column-1">
<div class="overlay"><!-- --></div>
<div class="content">
<h1>A demonstration of cross-browser transparent columns</h1>
<p>A demonstration of how to implement cross-browser transparent columns. It's used by having combination a transparent <code>div</code> with the same height as it's parent and a <code>div</code> containing the content. Then we pull the overlay <code>div</code> to the left and set the content <code>div</code> to <code>position: relative;</code> to fix the z-index. Check the source for more info.</p>
<p>Since IE6 lack support for absolutely positioned elements with both <code>top</code> and <code>bottom</code> (this is true for <code>right</code> and <code>left</code> as well) we have to compensate for this using proprietary CSS expressions. Voilá!</p>
<h2>Browsers</h2>
<p>Tested with and works in Firefox 3.x (Windows, Solaris & OSX), Safari 3 (Windows & OSX), Opera 9 & 10 (Windows), IE6 and IE7.</p>
<h2>Quirks to have in mind</h2>
<p>You must to set the width of the parent columns for this to work properly. Each column needs it's own ID and it's own IE6-rule for the <code>expression: ()</code>. It also won't work in IE6 without javascript, which is a minor issue since it degrades gracefully.</p>
</div>
</div>
<div class="container" id="column-2">
<div class="overlay"><!-- --></div>
<div class="content">
<h2>A sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent at felis. Praesent vulputate, tortor vitae bibendum dignissim, risus enim congue lacus, tincidunt condimentum sem arcu eget dui. Nulla ligula. Etiam lobortis, dolor eget volutpat posuere, nisl metus fermentum velit, vitae egestas purus massa vestibulum dui. Donec eu ante. Suspendisse feugiat, ante ut pulvinar ultrices, nisi tellus lobortis felis, id dapibus neque lorem nec nisi. Aenean lorem lectus, consectetuer ac, ornare vel, eleifend tincidunt, nibh. Nullam auctor. Nulla facilisi. Suspendisse sed erat. Ut vitae sapien. Duis libero risus, ultrices eu, porttitor at, eleifend vitae, massa. Integer magna. Proin a diam. Curabitur congue.</p>
</div>
</div>
</div>

CSS

body {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
background: url(pattern.gif);
color: #fff;
width: 770px;
margin: 0 auto;
padding: 50px;
}
h1,h2 {
color: #77AFC7 !important;
margin-bottom: 0;
line-height: 1.2em;
}
p {
margin-top: 0;
}
a {
color: #aaa;
}
a:hover {
color: #FFF !important;
text-decoration: none;
}
code {
background-color: #100;
padding: 0.2em 0.5em;
display: inline-block;
}
#wrapper {
overflow: hidden;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
background: #000;
opacity: 0.65;
-moz-opacity: 0.65;
filter:alpha(opacity=65);
}
.container {
position: relative;
float: left;
}
.content {
position: relative; /* Fixes the z-index */
float: left;
}
#column-1 {
width: 500px;
}
#column-2 {
width: 250px;
margin-left: 20px;
float: left;
display: inline;
}
#column-1 .content {
padding: 20px;
width: 460px;
}
#column-2 .content {
padding: 10px;
width: 230px;
}
/* Let's compensate for IE6's inability to interpret top: 0; and bottom: 0; */
* html #column-1 .overlay { height: expression(document.getElementById("column-1").offsetHeight); }
* html #column-2 .overlay { height: expression(document.getElementById("column-2").offsetHeight); }

CSS

html{
overflow:-moz-scrollbars-vertical;
}

CSS

/* Mozilla based browsers */
::-moz-selection {
       background-color: #FFA;
       color: #000;
}
/* Works in Safari & Opera*/
::selection {
       background-color: #FFA;
       color: #000;
}

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>

CSS

/*\*/
html>body*.yourclass {
padding:6px;
font-size:13px;
}
/**/

Internet Explorer 6 & 7

CSS

foo {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
}

of

foo {
filter: alpha(opacity=80);
}

Internet Explorer 8

foo {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

Meer info

Meer info over opacity voor ander browser kan je in deze CSS Snippet vinden.