The problem

Modern web browsers have different level of CSS standards support. It would be great if we could use only one CSS style sheet for all browsers, but this is not an option so we must deal with browser inconsistencies.

Internet Explorer is famous for its poor level of standards support even though IE8 and especially IE9 is a big step forward.

The solution

However, there is a workaround. You can detect whether a user is using an older version of Internet Explorer and apply a different CSS style sheet.

This can be achieved by using a conditional comment inside the index.php file of your template. There are two forms of conditional comments. The positive and the negative. The positive will include the markup of the comment only if the condition is met while the negative will include the markup if the condition is not met.

The syntax for a conditional comment is this:
{code style="brush:html" } Positive Negative {/code} where condition is one of the following:

IE
Any version of IE
lt IE version
Versions less than version
lte IE version
Versions less than or equal to version
IE version
Only version version
gte IE version
Versions greater than or equal to version
gt IE version
Versions greater than version

where version is the version of Internet Explorer, typically 7, 8, or 9.

Examples

1. This conditional comment will apply the style sheet ie_only.css if any IE version is found:
{code class="brush:html" } {/code}
2. This conditional comment will apply the style sheet ie_less_8.css if a version less than 8 is found:
{code class="brush:html" } {/code}
3. This conditional comment will apply the style sheet ie_8.css if version 8 is found:
{code class="brush:html" } {/code}
4. This conditional comment will apply the style sheet not_ie.css if no IE version is found:
{code class="brush:html" } {/code}

{loadposition contentlinks}

This is a simple tip to replace text with an image. In the example below we will be replacing the text inside an <h1> tag.
What we'll do is to move the text off the screen with "text-indent" and then insert a background image to the <h1> tag.
This is how you can do it {code class="brush:css;" } h1 { text-indent:-9999px; background:url("image.jpg") no-repeat 0 0; width:100px; height:40px; } {/code}

{loadposition contentlinks}

In many cases, you will find that your layout looks great on Firefox but looks "broken" in Google Chrome. Although you should firstly consider improving your template to look good in Chrome, there is a quick css fix.

Insert this code in your css file:

{code class="brush:css;" }/*** FIX FOR CHROME ***/ @media screen and (-webkit-min-device-pixel-ratio:0){ insert css styling here } /*** END FIX FOR CHROME ***/{/code}
{loadposition contentlinks}