This is, without a doubt, the most notorious IE6 bug that has baffled all CSS developers. Also known as the "Doubled Float-Margin" bug, this issue is about the margin properties of a floating element is doubled in IE6 and IE5 (IE7 has no such issue). For example:

.float-left-element {
	width: 100px;
	height: 100px;
	float: left;
	clear: left;
	margin: 0 0 0 10px;
}

The style class above will make a 100x100 pixel block element float to the left with left margin of 10 pixels. However, in IE6 and 5, the left margin will appear as 20 pixels (doubled the original) instead.

Internet Explorer (IE) has been well known as the most W3C incompatible browser. In particular Internet Explorer 6 (IE6), is far most the worst of its kind. Most web development jobs involving front-end design, will spend most of their debugging time on issues relating to IE6 and other IE. For a complete list of issues, see Internet Explorer CSS Issues & Solutions.

Solution

Method 1: Display Inline

Note the definition of the float property:

The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property). The 'display' is ignored, unless it has the value 'none'.

It is because of the fact that display is ignored, and IE6 also has another weird bug that causes the first line of an inline element to be margined, a beautiful solution was created to fix the bug - add display: inline. This will correct IE6 and 5 but does not affect all other browsers that follow standards.

.float-left-element {
	width: 100px;
	height: 100px;
	float: left;
	clear: left;
	margin: 0 0 0 100px;
	display: inline;
}

This is an important fix for cross-browser CSS development that all should remember.

Method 2: Wrapper

An old solution is to wrap the existing element with a floating wrapper. The wrapper will float and contain the element that wishes to have margins.
The HTML will be:

<div class="float-left-container">
<div class="float-left-element">
	... content ...</div>
</div>

This CSS will be:

.float-left-container {
	width: 110px; /* inner element width + margin */
	height: 100px;
	float: left;
	clear: left;
}
 
.float-left-element {
	width: 100px;
	height: 100px;
	margin: 0 0 0 10px;
}

This method is not recommended since it creates an extra container just to fix the problem.

References

• The IE5/6 Doubled Float-Margin Bug
• Floats, Margins and IE

Inline elements such as <span>, <a>, <label> are not suppose to have width. According to the W3C standards, the following snippet should not work and is invalid:

span {
	width: 40px;
}

However, the above code will actually work in IE, making the inline element 40 pixels wide.

Internet Explorer (IE) has been well known as the most W3C incompatible browser. In particular Internet Explorer 6 (IE6), is far most the worst of its kind. Most web development jobs involving front-end design, will spend most of their debugging time on issues relating to IE6 and other IE. For a complete list of issues, see Internet Explorer CSS Issues & Solutions.

Solution

To fix the problem, is to turn the inline into a block element by using the display property.

span {
	display: block;
	width: 40px;
}

I strongly recommend not to use this fix unless you absolutely have to, since this essentially breaks the inline and block element definitions.

When you have a fixed with website that is centered on the page, you would normally use the margin or text-align properties like this:

#container {
	width: 750px;
	margin: 0 auto
}

However, this may not always work since IE has interesting ways of calculating margin and box model.

Internet Explorer (IE) has been well known as the most W3C incompatible browser. In particular Internet Explorer 6 (IE6), is far most the worst of its kind. Most web development jobs involving front-end design, will spend most of their debugging time on issues relating to IE6 and other IE. For a complete list of issues, see Internet Explorer CSS Issues & Solutions.

solution

To fix the problem, first center align content in the body tag then re-assign text alignment to left for the container:

body {
    text-align: center
}
 
#container {
    width: 770px;
    margin: 0 auto;
    text-align: left
}

This post keeps a record of IE CSS bugs and fixes. You may find it useful when trying to find or correct styling problems by checking against the following list:

• Float Element Margin Doubled
• Fixed Width Container Centering
• Inline Element Has Width

I will constantly update this post.

source: d.hatena.ne.jp/gyuque

When I first viewed the demo, my first reaction was to right-click and check whether the 3D canvas is not Flash-based. Amazingly, the demo is constructed purely in JavaScript with a bit of rendering assistance from the new canvas tag in HTML 5. You must check this out and take a glimpse at the future of the 3D web.

Here are the demo ( The scripts will use a lot of resources, browsing using Google Chrome is recommended ) :

• Demo 1 - 3D texture mapped with physical computing
• Demo 2 - Hatsune Miku 3D
• Demo 3 - 3D iPod touch with environment mapping

References

• hemiolia.com - 30 Japanese geeks you should follow on Twitter
• Kawa.net Tech Blog - Incredible JavaScript+Canvas 3D demos from Japan!
  
• 最速チュパカブラ研究会 - Texture Mapping with HTML Canvas And Performance Tuning

One of these features is the Shortcode API since version 2.5. As many would have used to insert photo galleries in a post, shortcodes are used to place custom "tags" in the content, which later will be converted or processed by WordPress or plugins.

For example:

1

[gallery id="123" size="medium"]

The shortcode API processes the 'id' and 'size' attributes without the need to write regular expressions for string matching. Many have utilized this mechanism to construct a user-friendly environment for insert images, thumbnails, Google ads and more.

References

• WordPress - Shortcode API
• 精通 WordPress 簡碼