Firstly, lets fix that weird issue with font size.

The Safari browser makes the text of your site slightly larger, I assume this is so it is easier to read on the small screen, but it can break the design of your site.

To do this simply add:

-webkit-text-size-adjust:none;

You can add that to the body in CSS, like so:

body {
    -webkit-text-size-adjust:none;
}

Or, if you have a reset stylesheet, add it too that instead. I definitely recommend using the reset.css.

The second issue (well I think its an issue), is unless you stat otherwise, the location bar stays visible after the page has completely loaded. The user then has to scroll an extra 60 pixels to see the content.

To fix this, we have a little bit of javascript that stats, when the site has finished loading, move to this point.

window.addEventListener("load", function() { setTimeout(loaded, 100) }, false);
    function loaded() {
        document.getElementById("page_wrapper").style.visibility = "visible";
        window.scrollTo(0, 1); // pan to the bottom, hides the location bar
}

Simply edit the bit that says, “page_wrapper” to be whatever div you are using on your site.

Place this code directly in the header of the site, or into a seperate JavaScript page and include that, I recomment the latter.

Now check out your snazzy site, working as it should on the iPhone/iPod Touch!

They now support Extentions pretty much the same way Firefox does. Check link below in your Chrome browser:

https://chrome.google.com/extensions

They ain’t exactly perfect right now, but the idea of having it is a welcome addition indeed.

1. Firebug

Firebug is a truly great plugin. If there is a bug in your code, this thing will help you find it. Simply rollover the section that’s buggy and start debugging or maybe there’s something not loading into your flash, this can help!

Download here

2. Web Developer

If you need to disable your images, CSS, JavaScript and pretty much anything else, this is the plugin for you. Hotlinks to all your W3 checkers, ability to resize the window and clear cache are all handy features of this plugin.

This is very much a front-end developers dream plugin. Most, if not all the functions apply to them.

Download here

3. FireShot

So, your doing some work for a client, and you need to send over print screens. This plugin saves out full size print screens in PNG form. So no longer will you have two halves of your work in which you have to patch together.

Download here

4. MeasureIt

“How off is that dodgy header”, “How far do I need to move that?”. With this plugin, there’s no more guessing games, simply drag the ruler over the area you want to measure, and you will instantly know the distance you need to move your elements.

Download here

5. ColorZilla

See a colour you like, can’t be bothered to check you code or Photoshop for that hex code. This plugin is a simple eyedropper tool. Click on the colour you wish to know the hex for and it will give it to you. Easy.

Download here

Now that I have told you of these magical plugins, get using them ASAP!

Client: COI HSE – Health & Safety Executive

Job: Asbestos

Language: XHTML/CSS

Accessibility: WGAG AA

Summary:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Firstly, lets download the files we need (right click, save link as)*:

- iepngfix.htc
- blank.gif

Once you have these files downloaded, put them in any file structure you like, so blank.gif in images directory, and iepngfix.htc within another directory.

Include the below code within your CSS file, ideally at the top, I will explain this after:

* { behavior: url(iepngfix.htc); }

The reason I use the asterisk is because it means all, so rather then specifying the div or img tags, this will PNG fix all items within the CSS and HTML.

This sets the behavior of the document to use iepngfix.htc.

Now open the iepngfix.htc, we need to edit the location/path of the blank.gif.

Search for the following code:

IEPNGFix.blankImg = 'blank.gif';

Update the code within ‘ ‘ to the path where your blank.gif is saved, this has to be local to the HTML pages and not the CSS or the HTC file itself.

For instance if you stored the blank.gif within the images directory then the code would be like the below:

IEPNGFix.blankImg = 'images/blank.gif';

If you want a PNG as a tiled background, then you have to use the special background javascript file, provided by TwinHelix.

Simply add it to the head of your site, like so:

<script src='iepngfix_tilebg.js' type='text/javascript'></script>

You have successfully fixed the PNG transparency issue with IE6, without editing any of your current HTML.

* iepngfix.htc was provided by the good people at http://www.twinhelix.com/css/iepngfix/ so thanks to them.

Let me know how you get on!

http://tredosoft.com/Multiple_IE

Enjoy!

This email was part of the new MINI Convertible launch campaign.

This development carried on the same great feel as its predecessor, MINI Convertible Email – Vertical.

This email was part of the new MINI Convertible launch campaign.

This development was a nice challenge. The need to make sure the horizontal concept worked in all main browsers and email clients was essential.