Four Shapes web design

Below is a list of historical results from the Acid 3 test.
Acid test
User agent checking

Firefox 2

50/100 - Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

52/100 - Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-US; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11

Differences between Mac & PC platform;

Test 26: e2 - parent element doesn’t exist after looping
Test 27: e2 - parent element doesn’t exist after waiting

Safari 3

40/100 - Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/523.15 (KHTML, like Gecko) Version/3.0 Safari/523.15
40/100 - Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en-us) AppleWebKit/523.10.6 (KHTML, like Gecko) Version/3.0.4

Safari 3 Mobile (iPhone/iPod Touch)

40/100 - Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A538a Safari/419

Opera 9.25

47/100 - Opera/9.25 (Windows NT 5.1; U; en)
47/100 - Opera/9.25 (Macintosh; Intel Mac OS X; U; en)

IE 6

13/100 - Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022)

Last Friday Code Press was launched into a ‘beta’ phase…

Today it’s ready for the world! Check out the site for more details about our premier coding service.

Using css styling to substitute for an image, is an effective way for developing sites efficiently. Which not only saves time and bandwidth, but also allows more flexibility when adjusting designs.

By using a border technique, we can create the effect of diagonal lines with some simple code.

Here’s what we want to achieve:

Read the rest of this entry »

For those who aren’t familiar with the box model hack, it relates to a problem in the way Internet Explorer 5 decides upon the dimensions of an object, when reading the CSS.

The correct way, according to CSS 2.1 Specifications is: Total width = width + padding + border + margin.

But Internet Explorer 5 sees it like this: Total width = width + margin.

Height also works the same, although it tends to be used less in CSS design.

The original box model hack, by Tantek Çelik, tricks IE5 into thinking the CSS declaration has ended. So we can assign a different value to IE5 first, then override it with our intended sizes for other browsers.

The Box Model Hack:

.box {
padding: 20px; border: 5px solid #ccc;
width: 200px; /*For IE5/win*/
height: 400px;
voice-family: "\"}\"";
voice-family: inherit;
width: 250px; /*For Compliant browsers*/
height: 450px;
}

The version we are going to be using takes advantage of another bug in IE5, which can’t read our backslash (”\”), when positioned next to certain characters (except 0-9, A-F). It works by applying our dimensions to all browsers first, as every CSS browser understands ‘width’ and ‘height’, then compliant browsers read the second set of dimensions (’w\idth’, ‘he\ight’) after. It will then display our results correctly. Leaving us with a hack that uses more meaningful code and less clutter.

The Compact Box Model Hack

.box {
padding: 20px;
border: 5px solid #ccc;
width: 200px; /*For IE5/win*/
height: 400px;
width: 250px; /*For Compliant browsers*/
height: 450px;}

In conclusion there are many Box model hacks out there, so it’s really down to personal choice. Our version is simple and keeps your code tidy.

Edit - 21st July. Browsers that this method isn’t supported on (apart from IE) are as below.

Mac OSX Icab 2.0, OmniWeb 4.2 (fixed in 5.2) & Unix Konqueror 3.0

These browsers aren’t the newest incarnations and may have been fixed since.