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

Sunday, July 5, 2009 7:03

Posted in category CSS, Development, IE hack, Web Standards

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.

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:

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

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.

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

Way to use it:

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 , on ie browser it will display a transparent box around it and have red x like the error when the picture is not displayed.

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

Way to use it:

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!

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(
'

'+
'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.'+
' '
)
});

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.

Related posts:

1. Some Important and Effective Tips and Tricks from the Masters of CSS Peter-Paul
2. Best Tips for Every Web Designer, Just Starting Out Should Know There are
3. Hack IE by using Conditional Comments for multiple CSS MSIE for W
4. Digital Photography Hacks: 100 Industrial-Strength Tips & Tools (eBook) Your digit
5. Important Tips to Create a More Usable Web, for designers and developers Whether it

Related posts brought to you by Yet Another Related Posts Plugin.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. Tags: CSS, css hacks, Designer, ie6