Five Important CSS Hacks Tips for IE, Every Designer Should Know.

A lot of web developers still finding the best way to build a cross browser website. Especially showing it on ie6 browser, your beautiful looking website in Mozilla can become ugly and hideous website. I’m not discouraging you guys but this is the truth. Staying out late at night designing your website will be such a waste if not be able to show it to all the internet user right? So why having a website that looks better in ie’s browser is also important? The main question is:

Why? Why? Why? There’re still internet users using ie browser and even worst they still using ie6 browser to surf. Are they holding the spirit of old school or something?

When you buy a pc or laptop that have windows operating system, it’s bundled with ie browser. If you have windows xp, I’m sure you will get ie6 browser. In the office, for sure you get ie6 for old pc. Either you’re too lazy to install new browser or your company block any installation to the pc.

Whatever the reason is, here I list some of the css hack for ie that I know.

<!–[if lte IE 6]> <![endif]–>

Most of people must have used this code. First you create a css file that looked best in Mozilla then create a substitute css file that make it look almost the same for ie.

Way to use it:

<link rel="stylesheet" href="style.css" type="text/css" />
<!--[if lte IE 6]>
<link rel="stylesheet" href=" styleie6.css " media="screen" /><
<![endif]-->

Same goes to ie7 and ie8 just change the number 6.

The inline css hack for ie

Not the inline css in your website code but in the css file itself.

Way to use it: In style.css file

#header {
margin-left: 10px; /* common css code */
_margin-left: 20px /* this is ie hack */
}

Why I put _margin-left? The reason is only ie browser will read that such code and other browsers will just ignore it.

iepngfix.htc

This is the most popular hack for ie to display png image with transparent background.

Way to use it:

<!--[if lte IE 6]>
<style>
#header, #navigation, and other id or class that have .png background-image { behavior: url("link to your/iepngfix.htc") }
</style>
<![endif]-->

It did the job but you can’t use it for id or class with position relative or absolute because it will display an error message that element can’t be click. Another problem is when you use it on image that use <img src=”image.jpg />, on ie browser it will display a transparent box around it and have red x like the error when the picture is not displayed.

DD_belatedPNG?

This is also a .png transparent image hack for ie browser.

Way to use it:

<!–[if IE 6]>
<script src=”DD_belatedPNG.js”></script>
<script>
DD_belatedPNG.fix(’#container, #banner, #logo‘);
// List the div id or class that contain .png image file in the bracket.
</script>
<![endif]–>

You can check out my previous post here for more detailed way to use it. Plus you can also download my free template. Wink! Wink!

Warning message (not recommended)

This should be your last way for css hack technique. Don’t simply use it, use it when you really have no choice or some of your visitor might get offended.

Way to use it:


$(function(){
if($.browser.msie && $.browser.version<7)
$('#top').before(
'<div>'+
'It has been detected that you are using Internet Explorer 6 or lower.
Unfortunately this is an unsupported '+
'browser and you won\'t be able to view this website properly.
We recommend upgrading to a newer version of '+
'Internet Explorer or FireFox.'+
'</div>'
)
});

When user browse your website using ie6, it will display something look like this on the top of the browser.

ie6 Warning

That is all the css hacks that I can share with you. I have applied these entire tricks and it did a good job for me in my career as a web programmer.