Following on from Richard’s demonstration of the broad share of the browser market that Internet Explorer has, it is worth noting that we developers and the designers still need to cater for the relic that is IE6. Whilst your everyday user will probably be using version 7 or 8 or more likely Firefox, the corporate sector are still tied to the old browser due to the massive project of rolling out a new version in a corporate environment.

ZDNet has this to say on the matter: http://blogs.zdnet.com/BTL/?p=31328

So, despite thinking that we should code to the latest browser technologies and new web standards, we should always keep in mind the clients main customer market and ask the question ‘what is the minimum browser that the site should cater for’.

One good reference site for all things that IE doesn’t comply with is here: http://www.positioniseverything.net/explorer.html

Here’s just a few posts that we’ve come across this week in the world of CSS and design:

Tips for desiging in the browser from Design Shack: this includes some interesting ideas on how best to design sites that are cross browser compatible and includes Adobe’s BrowserLab and the very useful Typetester which allows you to dynamically compare fonts in the browser.

MakeUseOf have this post about Mitto, the online secure password manager.

Another great post from Smashing Magazine talking about  understanding and optimising your sites performance.

In life there are generally 2 groups of people: tidy ones and untidy ones. Those who fill the dishwasher, pop in a tablet, turn it on and those that leave dirty cookery stacked high in the sink to go mouldy and turn the kitchen into a festering hole. As a web developer you must be the former. You must be clean, both hygienically speaking and in terms of the markup and coding you produce.

Creating websites with clean and concise code which conforms to the latest web standards is paramount to producing high quality, fast and SEO efficient sites. A site that is created and can be validtaed using W3C’s validation tools will aid future proofing and accessibility. A badly created HTML page may work in the current crop of browsers but that does not mean that future version will be so forgiving.

Always write XHTML making sure it is as stripped down and lightweight as possible, use no unnecessary tags or attributes, after all a Formula 1 car has no radio or cup holders (it doesn’t need them). All styling for a page should be contained within style sheets using validated CSSand applied to the page using either class names or by tag Id. Not only will this help any future development that you may make to a site it also means that any other competent developer can look at the code and easily understand how it work.

Spending more time to produce the best output you can will not only benefit your clients but will also benefit your own team of developers, easing any future updates and giving SEO potential a head start.

It’s that sudden moment of realisation that the copy and paste you’ve just done has over written a newer version of a file and you don’t have a backup! All you want to do is cry out loud but when you’ve have no backup no one can hear you scream.

This happened to me recently (I know; you should always work with a backup but I was just making a quick change and thought it wouldn’t be a problem) and I copied over a CSS file that contained site specific styling and subsequently lost the formatting that had taken a fair while to put together. I’d like to point out that this happened on our development server so no live sites were affected but the situation could very well apply.

I was stunned into silence for at least 20 seconds before coming to terms with my heinous error and getting on the internet to try and retrieve a cached version of the file from one of the many browsers on my machine. This is something that I remember doing in the past and was hoping it would help me out again. However my browsers had other thoughts and were proving to be less than helpful:

IE7 seems to be deleting my session cache once I close the browser down. I had already deleted the Firfox cache whilst making the CSS changes that I copied over. I was going to look at Safari as a last resort so turned to Google Chrome. This proved to be my lifeline as a quick trawl through the search pages returned for: “cached css files chrome” gave me this: ChromeCacheView.

The small exe file runs up and interrogates the cached indexing history for the browser and displays a list of all the content you have viewed, including Filename, URL, Type etc. From this (large!) list of content I spotted the CSS file I was after and using F4 copied the file to a location on my desktop from where I could view its contents. Although it was an out of date copy it did provide me with the much needed complex styling I was after.

So, after taking some time to reinstate the changes lost, I was able to recreate the CSS and the website was back to the way it was without anyone noticing.

Of course for the eagle-eyed amongst you the lesson for today is: Think twice before copying over a file and never, ever do anything without a backup.

It’s always nice to find a fix for a Internet Explorer specific bug although not nice the amount of time it takes to find. This particular one relates to setting the height of a <div> containing a background-image which, not unsurprisingly works fine in FireFox.

Consider:

Which renders thus in IE7:

Note the whitespace beneath the blue image despite this image being 13 pixels high.

Now the solution is as simple as adding overflow:hidden to the divHeight class!

Simple but effective!!