I am a web designer so dealing with multiple browsers is just part of the job.  Making sure that your pages appear correctly in as many browsers as possible is the key to make sure you touch as many users as you can.  With this experience I have seen a certain amount of snobbery when it comes to both IE and particularly Firefox.

The divide is pretty clear between IE and Firefox; IE users are on the whole the general public who have purchased an off the shelf PC or laptop and are happy with the standard Microsoft setup, whereas Firefox users are web designer, developers and IT minded people.  This is where the snobbery starts, Firefox users (the web designer/developers) have an automatic hate of Microsoft – the freedom crushing machine that forces users into their way of thinking.  There are two reasons for this state of mind in my opinion -

1. They think it makes them different or rebellious
2. It gives them a superior stance when speaking to the less knowledgeable general user

It is perceived that Firefox offers a more accurate web experience, your pages are represented as they should be and it gives more control with add-ons to fine tune your work.  In some cases this is true; the add-ons that firefox offer as an open source alternative can be helpful, but that doesn’t hide the fact that the text and image rendering capabilities of Firefox are not as good as IE7, as well as the strange results when using CSS which IE seems to handle in a more organic way.

Okay I know it sounds like I am just having a go at Firefox, so I should explain it isn’t Firefox that is the problem, it is the snobbery that surrounds it.  For every problem with IE there is an equal problem with Firefox and those that love Firefox so much should remember that.  Granted IE6 is now so out of date with the technology of today and it is becoming a little embarrasing, but IE7 and IE8 have made some big steps forward.  I personally like IE7 as an equal to Firefox, but yes it has it’s own issues.  IE has a tendancy to unexpectedly crash/close without notice, while at the same time some web functions don’t react as they are supposed to.  All this makes IE a more frustrating option than Firefox,  but from a page rendering perspective IE gives a much better feel.

I always make sure my pages display at their best in both these browsers, but the snobs will do well to remember that IE is still the most popular browser choice for users which are ultimately the people we are trying to target with our web offerings.  Firefox however is still trying to find a really strong foothold in what is becoming a more competitive market on a daily basis.  All any designer needs to remember is – create for your audience not yourself.

With the array of web browser brands and versions out there it makes a web designers job difficult in keeping their websites looking the same, there are many different tricks you can learn to help with this head scratching task but I will focus on one that has helped me many a time.

As browser versions  rollout in an attempt to keep up-to-date with technologies, it is becoming harder for designers to keep their sites consistent across different browser versions such as IE6 and IE7 and with the recent beta release of IE8 it doesn’t look like getting any easier.

So now I am going to show you how to use a transparent PNG file in IE7 and replace it in IE6 with a transparent GIF using CSS, the PNG file will preview as a perfect high quality transparent image in IE7 but will have a solid background in IE6 thus not being transparent.  This is where the !important statement comes in, the CSS below shows the code just referencing the png >>

div#logo{
height:153px;
width:180px;
background: url(images/logo.png);
}

The text in bold is the main image as I would want it to preview in IE7, then below we add the !important statement to preview differently in IE6>>

div#logo{
height:153px;
width:180px;
background: url(images/logo.png) !important; background: url{images/logo.gif);
}

The bold text here is the !important statement followed by the same code for the GIF image, IE7 will read until where the important statement ends while IE6 ignores this statement and continues to the end of the line, thus giving you two different representations of the same effect one for IE7 and one for IE6, easy really, but oh how useful.

This can be used for pretty much any unusual result between the browsers such as colour change, font issues and margin or padding differences. This tutorial is just one way to use the !important statement but hopefully one you will find useful