To use this website fully, you first need to accept the use of cookies. By agreeing to the use of cookies you consent to the use of functional cookies. For more information read this page.

Building a website with compatibility for older browsers

28 Jan 2014 at 12:01
It's not something I like to say, but unfortunately, people do still use Internet Explorer 6 and 7. Therefore it only seems right to design websites to be fully compatible with them as well as today's browsers. This tutorial shows how to achieve this.

Building a website for older browsers

Hundreds of websites out there attempt to maintain the best compatibility possible out there. This means supporting the older browsers such as Internet Explorer 6 and 7 (remember those days?) where CSS was in it's infancy.

To build a site that reaches out to everyone, one must assume that their target audience has at least one user who is using one of these dated browsers.

Take this site for instance. It uses many features that are not supported in the CSS2 based browsers such as IE7. To maintain a readable page (afterall, that's what a website is about, right?), one must implement specialised techniques. The pages are intentionally different, because features like inline-block are not supported by IE7, so to make this work we tell it to use block and instead of having a width of 48% we give it back the full 100% width. The site looks different, but the content looks well-formed.

Below is a set of pictures of the site front page showing how it should be, where the fix has not been applied and where it has.

How it should ook

IE7 without fix

IE7 fixed

The first image shows the website in Internet Explorer 8, Safari 6, Chrome 23+ and so on. This is perhaps the most optimal, as the site was designed to look this way. The second image shows how it appears in IE7 without a fix. Nothing is columnised thus the site will not display as an easy read. The final image, image 3, shows how applying the fix can metamorph the website into a different design, with just a few lines of CSS, but retain its inner value.

The fix which I actually discovered from another website found here, is to apply a certain character to the start of a CSS attribute. Whilst it may seem a bit of a hack, it seems to work well. The fix repairs my website for IE7, at least, as I have no interest in supporting IE6, as there are just so many features that are designed for CSS3 such as border-radius, box-shadow etc.

CSS
.column
{
	/*IE>8*/
	width: 48%;
	display: inline-block;
	/*IE7*/
	*width: 100%;
	*display: block; 
	/*IE6*/
	_width: 100%;
	_display: block; 
}

This was formed by Brian Cray's tutorial. I'd like to pay him thanks for his incredibly useful technique.

Using conditional comments

An alternative to this is to use conditional comments. These are comments that Internet Explorer version 1 - 9 (inclusive) will take advantage of.

CSS
<!--[if IE 6]
<link rel="stylesheet" type="text/css" href="/ie.css" />
-->

This will check whether or not the user is using IE6 or not and include a stylesheet based on the result of the if statement.

old
browser
ie
internet
explorer
compatible
compatibility
issue
fix