Merivale is a group owning several club, restaurant and retail stores in Sydney. The website uses simple 3D (possibly PaperVision) and photo-thumbnails as means of navigation. The site was built by deepend and the Hallway.

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.

Foufou is an independent indie brand established in 2005. Their graphics and products are full of randomness and flamboyant creativity. They have also expanded their influence by forming a collective indie brand called 'Paintrack' with other Taiwanese designers.

www.foufou.com.tw

Visual Design, Animation, WordPress, Content Management System, Search Engine Optimisation, Web Site Build and Administration

DTA International

Founded in 2003, DTA International is a contract manufacturer of cosmetics and toiletries. The company's manufacturing facility and laboratories are located in the lower North Shore, Sydney, New South Wales.

www.dtainterantional.net

Visual Design, Photography, Web Site Build and Administration

Shu Shin Bou

Shu Shin Bou is a Japanese-style traditional dessert stored originated in Taiwan. Its first store in Sydney opened in October 2008.

www.shushinbou.com

Visual Design, User Interface Design, Web Site Build and Administration

source: www.beosound5.com

This beautifuly crafted music control unit transform your lounge into a command center from Star Trek.

BeoSound 5 is not just a control panel for playing CDs and online radio stations, it is also a DJ who analyzes tracks played scrupulously leading to your own music taste. However, it comes with a price - BeoSound 5 requires BeoMaster - a central media storage device.

www.martiniasti.com

A brilliant Flash product exhibit site built by Ars Thanea, a Poland based creative agency. Though initial e-mail and password registration is somewhat annoying, the refreshing, seemless transitions of animations prove that the site is worth the wait. The centerpiece is a Martini Asti bottle and is surrounded by different sets of ornamental objects depending on the page viewed.

The drag-and-throw mouse action will rotate the bottle and change the scene.

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

source: thebrowncorporation.com

I am not swearing. The title is the real name of a cardboard portable toilet.

It might not seem like a pragmatic solution for replacing outdoor long drops due to the inevitable oozing of ... from the biodegradable paper bag. Nevertheless, big hands for the creative design. And who knows, a Shit Box in the backpack might come handy one day for those nature lovers.

ACDSee Photo Manager 10: Process stays open after closing application problem

Problem

This notorious issue was discovered when certain users are unable to launch Photo Manager due to the presence of a previous instance of the program.

Cause

The cause, mentioned by many, is related to other programs that have modified the Windows Explorer's directory structure to include extra root folders. Many of the Nokia PC Suite users experienced this issue since an extra mobile phone specific folder was added to the root.

Solution

Re-installation may work for some software, but not Nokia PC Suite. Currently, there are no known solution.

References

ACDSee Photo Manager 10 Forum: Process stays open after closing application

source: mabonaorigami.com

Recently, my buddy Francisco recommended a video that demonstrated stunning origami art and stop animation. Two words to describe it: beautiful and stunning.

In the Pursuit of Perfection is a short film from ASICS to tell the story and vision of the Japanese company. While the film is directed and produced by Tim Schierwater and Nordpol+ Hamburg, the orignami models were designed by artist Sipho Mabona. The movie won a Grand Prix at the Eurobest, gold at the New York festival, gold at the London International Awarts, silver at the Clio in Miami and two times bronze at ADC Germany.

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 簡碼

Read the article "10 Beautiful Apple iPhone Concept Designs" from Toxel.com.

source: www.baekdal.com

Mentioned this concept car to friends a few days ago while talking about cars. GINA, short for "Geometry and functions In 'N' Adaptions", is a sports concept car with shape-shifting capability by BMW. Covered in an elastic skin layer and movable metal frames, GINA is a car without permanent exterior. In theory, car owners can adjust the exo-frame to mold their true dream car without being bounded by the original design.

Nifty, but not really practical. The thin layer of fabric will certainly not guarantee your safety ... perhaps the next step will be utilising some sort of electrical viscoelastic liquid materials ...

The following images are from Wired and Baekdal.com: