When you use an onclick handler on an anchor that does not return false and you use javascript:void(0) as a href be warned that the onunload will be fired. If you remove eventhandlers on the onunload to prevent memoryleaks then your eventhandlers will be removed when clicked on that anchor.

Sometimes you wish to find out how many characters fits inside a specific width.. Here’s a test I tried to find out some width of familiar fonts.
Width test

This example uses 1000 characters to calculate an average width on my screen:
arial normal 10 px -> width 4650px -> Average 5px/char
arial normal 11 px bold -> width 5504px -> Average 6px /char
arial normal 10 px numbers -> width 5430px -> Average 6px per char
verdana normal 10px -> 5583px -> Average 6px char
arial normal 11 px bold -> 6495px -> Average 7px char
arial normal 10 px numbers -> 6448 -> Average 7px char

I did not know this before but sometimes the window.onresize does not fire when in standards mode in your webpage. In standard mode the body size will be the total size of the content not that of the window size. If you have fixed width elements in your body and get an scrollbar or have the html set to have overflow hidden in IE window.resize will not fire when you make the window smaller because the body size does not change. This is because in previous quirks mode the body size was the same as the window size. But Microsoft did not change the event triggering when standards mode was on the market and the body size was not the same as window size. You only have the possibility to set the height and width of the body to 100% but then you cannot have a padding on the body because in standards mode box model the padding gets added to the width and height. But then you still get problems when other elements like tables have a width of 100%. ( this will be 100% of the body and you get a scrollbar again)..Then you again have to go back to a layout with tables yak yak..
Also the resize in the horizontal space will be firing different then on the vertical space. When the page is loaded a (body) onresize is firing and when you change content you can get an infinite loop. Here is a jquery example to prevent this infinite looping : see http://noteslog.com/post/how-to-fix-the-resize-event-in-ie/

Do you need an unobtrusive font resizing component which also remember the settings in a cookie?
With jQuery i’ve created a little piece of html and javascript. This piece can simply be loaded in your html container by using the jquery function load().

This is an unobtrusive way to add this component to your website and only is available in your source when javascript is enabled. Here is the simple code I used to add the functionality:

$(function() {
//show resize buttons
$('.resizers').load('setFontSizeComponent.html');
});

Inside the inserted piece of html I placed this javascript code block:

	//load the font-size cookie if it exists and change body font
	var currentFontSize = $('html').css('font-size');
	var currentFontSizeNum = parseInt(currentFontSize, 10);
	$.originalFontSize = parseInt($.cookie('fontsize'),10) || currentFontSizeNum;
	$('html').css('font-size',$.originalFontSize + 'px');
	$('.font-label').text('Size: ' + $.originalFontSize);

	// Reset Font Size
	$('.bh_resetFont').click(function(event){
		event.preventDefault();
		fsCResizeText(0);
	});

	// Increase Font Size
	$('.bh_increaseFont').click(function(event){
		// prevent url
		event.preventDefault();
		fsCResizeText(1);
	});

	// Decrease Font Size
	$(".bh_decreaseFont").click(function(event){
		// prevent url
		event.preventDefault();
		fsCResizeText(-1);
	});

	/**
	* resize html base font size. when 0 value is passed the original fontsize on start of the page is reset
	* @addition{integer} number to increase the fontsize
	*/
	function fsCResizeText(addition) {
		var newFontSize;
		if (addition == 0) { // reset size
			newFontSize = $.originalFontSize;
		}
		else {
			var currentFontSize = $('html').css('font-size');
			var currentFontSizeNum = parseInt(currentFontSize, 10);
			// set fontsize between 8 and 20 px
			newFontSize = Math.max(8,Math.min(20,currentFontSizeNum+addition));
		}
		$('html').css('font-size', newFontSize);

		// Create (or update) the value of a cookie:
		$.cookie('fontsize', newFontSize);
		$('.font-label').text('Size: ' + newFontSize);
	}

You need the jquery library and the cooky plugin for jquery
Here you can find the simple example page
http://www.frontendplace.nl/bb/wp-content/uploads/2010/resizer/setpagesize.html

The separate component you can load here

It took me a while to debug errors in javascript and found out that I had two external javascript files and in one javascript file the programmer used /*@cc_on!@*/ notation ( conditional compilation that works in IE). and in the other file the programmer used javadoc notation @param inside the comments. When the file with javadoc notation is loaded before the one with conditional compilation inside comments it works fine. But when I switch the loading sequence I get javascript errors.. So removing the comments or using a different loading sequence helped with solving the error.

When nesting a right floated box inside a left floated element. A right floating element will expand the containing left floating element to the width of the parent of the left floated element in IE6. According to W3C the left floating element should base its width on the width of the containing children.
In FF and SF (W3C) the total width will be the width of the containing children. A right floating element does not expand the left floating element to the width of the containing box of the left floated element.

FF

SF

IE

For testing purposes this example uses also attribute selectors.
IE6 ignores the attribute selector while Safari up till 4.0.3 ignores the :not() pseudo attribute syntax.
FF recognize both the [ attr ] and :not([attr]) syntax.
See
testattribute

For the developers who like to use the extra CSS draft 3 possibilities and don’t want to wait until internet explorer supports this. You can use the multi column properties :column-width, :column-gap and :column-rule. Coloring the selected text is an other example in draft3 css property
Example:

<style type="text/css">
div {
	column-width: 18em;
	column-gap: 2em;   /* shown in yellow */
	column-rule: 4px solid green;
	padding: 5px;      /* shown in blue */
	-moz-column-count:2;
	-moz-column-width:18em;
	-moz-column-gap:2em;
	-moz-column-rule: 4px solid green;
	-webkit-column-count:2;
	-webkit-column-width:18em;
	-webkit-column-gap:2em;
	-webkit-column-rule: 4px solid green;
}

/* draw any selected text yellow on red background */

::selection {color: gold; background: red;}
::-moz-selection {color: gold; background: red;}
::-webkit-selection { color: gold; background: red;}

/* draw selected text in a paragraph white on black */
p::-moz-selection { color: white; background: black;}
p::selection { color: white; background: black;}
p::-webkit-selection { color: white; background: black; }
</style>

Example: Multi column draft3

See for documentation:

http://www.w3.org/TR/css3-multicol/

https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions

Sometimes you want to know what the default values are for properties of the styling of elements inside your browser: I don’t know yet were to find the default stylesheet for IE but for Firefox you can look in:

C:\Program Files\Mozilla Firefox\res or type resource://gre/res/ in your address bar. There you find the following stylesheets:

1. EditorOverride.css
2. forms.css
3. html.css
4. mathml.css
5. quirk.css
6. svg.css
7. ua.css
8. viewsource.css

For the setting of the current Safari you can look at: http://trac.webkit.org/browser/trunk/WebCore/css/html.css

Look for explanation of this stylesheet on:

http://developer.apple.com/mac/library/documentation/AppleApplications/Reference/SafariCSSRef/Introduction.html

For Opera you can look in the templates folder inside the package(on mac) or in the folder(on windows)

I have found an error in ie6 where the margin (left/right) gets calculated wrong when you put the table inside an other table and use a quirksmode doctype.

See doctypeerror ( add with developer toolbar a margin-left of 0.5% on one of the elements)

See doctypenoerror where you don’t get the error.

When using a quirksmode doctype ( none or half) the content gets a really absurd width when you apply a margin-width in percentage on an element inside a tablecell where the table itself is inside an other table. Here is the example and some screencaptures what I mean. 

Adding a margin-right  on a span inside a not nested table is correctly calculated

Adding a margin on a span inside a nested table is correctly wrong and gets an absurd width (57276px).

For now I know three ways of clearing the floats:

1. using extra markup after floating element with div element and style=”clear:both”
2. using the :after syntax of a container with floating objects where you create a hidden content and clear the float using the syntax:

   .clearfix:after {
       content: ".";
       display: block;
       height: 0;
       clear: both;
       visibility: hidden;
   }

3. using the overflow:auto on the container with a property that triggers “haslayout” mostly width:100% what is basically what you want when clearing both.

The last one is supposed to be used as the best option according to quirksmode: http://www.quirksmode.org/css/clearing.html.
I think that using the  three options can all have there benefits.. In development a container for floating elements is not always possible and then you have to resort to the clearer div. The overflow:auto is not always possible when un-wrappable content is inside the container and you get the scrollbars. So my opinion: use version 3 where possible and it is logical to combine the inner divs for grouping the elements. For creating a layout the clearer div can sometimes be of better help. The second one is depending on the IE bug where content will grow the box even if the box does have a smaller height and you need the extra zoom:1 or height:1px inside a conditional commented stylesheet.
So better use the third one whenever possible. see clearingfloats