I’d like to share some very useful HTML development tools that I’ve found.

The latest versions of CSS allow some very interesting commands to be used allowing some very useful features. Unfortunately as with all new features, the older browsers (particularly IE)  don’t support them and can leave a very professional website looking, well, not so professional when those features aren’t appearing.

There is a very useful tool called PIE, this is a ‘behaviour’ that you can add to CSS that tells the older browsers what to do with commands that they don’t understand. Basically you need to have the file PIE.htc on your website (ideally for speed of access and reliability although you could link to a remote copy as well) and add to the CSS styles that use it ‘behaviour: url(/PIE.htc). This now allows the older browsers access to a list of CSS commands that previously would be ignored.

One particular affect that you need to be aware of here is that in the server setup, you need to set the MIME type for .htc files, which is not added as standard on a lot of server setups. On IIS, you can do this in the MIME types settings in the IIS setup, on Apache hosting you can just add the line ‘AddType text/x-component .htc’ to the .htaccess file in the root folder of the site. Basically this just tells the browser what type of file .htc files are and what to do with them.

After that you can now add a load of new CSS commands:

border-radius is probably the most useful, you express it like this:
border-radius: <top-left> <top-right> <bottom-left> <bottom-right>

This allows you to round the corners of any div. Now I can hear some people thinking, “well why bother with this when I can just use a graphic with rounded corners?”. There are several very good reasons, number one is going to be load speed, you can just use a background tile meaning the graphical load is much lower. The second issue this works around is site zoom and text zoom. In order to do rounded corners that work with both forms of zooming, you end up with quite a complex structure that doesn’t always work in all browsers without a lot of work. Our previous examples of this required 9 separate divs just to create the rounded corner affect, requiring 8 graphics (4 corners, 4 tiles). Not impossible but far more difficult than it needed to be.

Of course this isn’t a perfect solution, older versions of Firefox, Safari and Chrome aren’t supported by PIE, but this is fine because they actually have been supporting these features for quite a while under their own tags, it’s only been IE which hasn’t supported them. To make sure they work in all browsers we need to add the following lines:

-moz-border-radius:
-webkit-border-radius:

Use the same settings as for the border-radius command and the rounded corners should now look correct in all browsers from IE5 to the latest and greatest browsers.

I’m not going to go into a great amount of detail about the other functions, but there are many useful tools there such as box-shadow and a gradient shadow that can be implemented.

For full details of PIE, including the download of the files please visit: http://css3pie.com/

-Steven Lockey
Web Developer, Search Engine Optimiser

We are pleases to announce that the new web site for Air & Cargo Services has now gone live. Air & Cargo Services are a British, privately owned International freight forwarder established in 1972. They specialise in all forms of import and export, Air, Ocean, Road or Logistics and offer a wide range of services. www.aircargo.co.uk

Here is a short movie demonstrating how to quickly clear up skin blemishes using just the Healing Brush, the Patch Tool, and the Clone Stamp.

http://www.youtube.com/user/FstoppersPPT

Whilst browsing Form Fifty Five I came across this cool free resource for designers. The Noun Project is a library of infographics that are totally free to download and use in any project that you please. The main objective of the web site is to collect recognizable symbols that form the world’s visual language.

http://www.thenounproject.com/