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