Like many other web developers, I definitely hate Internet Explorer, especially the version 6. At a time where new and powerful techniques as such as HTML5 and CSS3 are emerging, it's not surprising that IE can't handle them correctly. Luckily, a few tricks can make your life easier.

Enable HTML5 on IE

Ever heard about HTML5? If you’re interested in web development, there’s no doubt about it. For those who doesn’t know, HTML5 is the next major revision of HTM; the core markup language of the World Wide Web.
Most modern browser can already handle, at least partially, the new HTML5 recommendations. But as Internet Explorer isn’t well known for its sense of innovation, it will simply ignore the markup.

The html5.js is a very interesting project which aim to make Internet Explorer HTML5 compatible. The only thing you have to do is to embed the html5.js script in your html document header. You can hotlink the script, as shown in the example below:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

» Source : http://remysharp.com/2009/01/07/html5-enabling-script/

Use the text-shadow CSS property on IE

Due to the recent implementation of the text-shadow CSS property in Firefox 3.5, designers started to use it quite intensively. Today, most modern browsers can render this property pretty well, but once again, IE ignores it.
Happilly, the proprietary, IE-only filter property can imitate text-shadow quite well. The example above shows how to apply the text-shadow property to modern browsers and filter to IE. Note that due to the fact filter isn’t a standard CSS property, it should be isolated using conditional comments.

If you’d like to learn more about the text-shadow property, don’t forget to check out our list of resources to get the most out of the text-shadow property.

p.shadowed {
  text-shadow: #0000ff 0px 0px 3px; /* Modern browsers */
  filter: glow(color=#0000ff,strength=3); /* IE */
}

» Source : http://www.howtocreate.co.uk/textshadow.html

CSS box-shadow on IE

In my opinion, box-shadow is one of coolest new CSS3 properties, because it allows you to easily create beautiful shadows on any kind of html element, without using any images. A real achievement for designers and front-end web developers!

.shadowed{
    box-shadow: 10px 10px 5px #888;
}

But, don’t ask if Internet Explorer can handle box-shadow. It can’t.
Once again, to imitate the box-shadow CSS property, we’ll have to use the filter proprietary property, as shown in the following example:

.shadowed {
    filter:
        progid:DXImageTransform.Microsoft.DropShadow(color=#969696, offx=1, offy=1)
        progid:DXImageTransform.Microsoft.DropShadow(color=#C2C2C2, offx=1, offy=1)
        progid:DXImageTransform.Microsoft.DropShadow(color=#EFEFEF, offx=1, offy=1);
}

» Source : http://ole-laursen.blogspot.com/2009/08/using-css3-box-shadow-with-ie.html

Rounded corners!

Ah, rounded corners. They are so popular with their “Web 2.0″ look and feel. The CSS3 specification understood it, and created a property, named border-radius, which is designed to easily create rounded corners without using a single image.
For those who doesn’t know, here’s how to use border-radius:

.round{
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

Fortunately, there’s several ways to create IE-compliant rounded corners without using images. My favorite is DD roundies, a small piece of javascript that can round any kind of HTML element.
The following example will create rounded corners on any HTML element with the roundify class.

<script type="text/javascript" src="DD_roundies.js"></script>
<script type="text/javascript">
  DD_roundies.addRule('.roundify', '10px');
</script>

» Source : http://www.dillerdesign.com/experiment/DD_roundies/

Multi column layouts

CSS3 allows you to automatically display some content in columns. This is a great thing as it give designers a lot more possibilities to create awesome layouts.
The following CSS will work on Firefox and Safari. It will automatically add columns to a div element.

.column {
    -moz-column-width: 13em;
    -webkit-column-width: 13em;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
}

Unfortunately, there’s no way to do something similar on Internet Explorer. But jQuery and its columnize plugin are here to help! The following example shows how easy it is to create columns using jQuery and columnize:

$('#mydiv').columnize();
$('#myotherdiv').columnize({ width: 200 });
$('#mythirddiv').columnize({ columns: 2 });

» Source : http://welcome.totheinter.net/2008/07/22/multi-column-layout-with-css-and-jquery/

CSS3 pseudo-selector emulation

CSS3 introduces lots of extremely useful selectors. Among others, the :nth-child() pseudo-class targets an element that has a certain number of siblings before itself in the document tree, as shown below:

p:nth-child(3) {
    color:#069;
}

As you can guess, these kind of things are way too advanced for IE. To overcome this problem, Keith Clark created a very useful script named ie-css3.js.
Using it is easy: Download Robert Nyman’s DOMAssistant, Keith’sie-css3.js and link them in your HTML document header.

<script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
<script type="text/javascript" src="ie-css3.js"></script>

» Source : http://www.keithclark.co.uk/labs/ie-css3/

Opacity

Opacity is another CSS3 that IE can’t render. It’s such a pity because being allowed to interact on the opacity of a particular element is very interesting in terms of web design.
Again, the crappy filter property can help us to achieve a satisfying result on IE. The example below shows how to use filter to make an element transparent.

.element{
    opacity:.7; /* Standard CSS */
    filter:alpha(opacity=70); /* IE patch */
}

Rotating HTML elements

Rotating elements is possible with CSS3, using the transform property.

transform: rotate(240deg);
-webkit-transform: rotate(240deg);
-moz-transform: rotate(240deg);

Internet Explorer will simply ignore all of the 3 declarations above. But hey, IE users got filter, don’t they? Sure, this property isn’t W3C valid, but since it’s Internet Explorer, you shouldn’t ask too much. The following code will imitate transform on all versions of IE:

filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540);

» Source : http://msdn.microsoft.com/en-us/library/ms533014%28VS.85%29.aspx

RGBa support

The “a” in RGBa stands for alpha. This new feature allows developers to specify an opacity value for a color, which is extremely useful when coding a website.

 .color-block {
    width: 50%;
    background-color: rgba(0, 0, 255, 0.2); /* Modern browsers */
}

As usual, Internet Explorer shows its lack of innovation and its inferiority to other browsers with no RGBa support at all. Fortunately, filter can achieve a quite similar effect to RGBa:

<!--[if IE]>
<style type="text/css">
.color-block {
    background:transparent;
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=#99000050,endColorstr=#99000050);
    zoom: 1;
}
</style>
<![endif]-->

» Source : http://css-tricks.com/rgba-browser-support/

IE compliant font embedding

For the past 15 years, the web has been dominated by a few fonts such as Arial, Verdana, Courier and most notably Times New Roman. Those fonts are labeled “web safe”, which means that almost any computer has them installed. (By the way, they aren’t installed on GNU/Linux because they’re not free)
But for a year or two, font embedding has become a very interesting and loved technique: It allows you to embed a particular font in your design so your users will see it, nevermind if they have the font installed or not.

Among other techniques, the @font-face method is probably the most clean. Believe it or not, IE has been supporting font embedding since version…4! This is a good thing, but since Microsoft can’t do anything like the others, your font has to be on the proprietary eot format and you have to use a different declaration to embed it on your web pages, as shown below.

Note that if you need to convert a font in Microsoft’s eot format, you can use this free online tool.

@font-face {
    font-family: " your FontName ";
        src: url( /location/of/font/FontFileName.eot ); /* IE */
        src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype"); /* non-IE */
    }  

/* THEN use like you would any other font */
.element {
    font-family:" your FontName ", verdana, helvetica, sans-serif;
}

» Source : http://randsco.com/index.php/2009/07/04/p680

Any similar techniques you’d like to share? Feel free to leave a comment!

 

92 Comments

  1. Posted February 1, 2010 at 5:06 pm | Permalink

    That’s what I call an excellent post. Bravo!

  2. Posted February 1, 2010 at 5:42 pm | Permalink

    Please give IE an eternal rest. Do not feed it with these steroids. Steroids is double edge swords.

  3. Posted February 1, 2010 at 5:49 pm | Permalink

    Too bad the box-shadow for IE doesn’t look good on a transparent background. IE gives me headaches.

  4. Posted February 1, 2010 at 5:57 pm | Permalink

    @Marco : Thanks for the compliments! It is very motivating to read comments like yours :)

  5. Posted February 1, 2010 at 5:58 pm | Permalink

    Wow, this is just what i needed! Thank you very much for summing this up.

  6. EstyH
    Posted February 1, 2010 at 7:07 pm | Permalink

    These tips are great. I want to point out however, that IE treats shadows as part of the element’s height/width. So you will have to adjust margin/padding especially for IE to get the layout to look like the other browsers…

  7. Posted February 1, 2010 at 9:01 pm | Permalink

    Sorry, but I have to disagree with this post. I think progressive enhancement is the way forward, rather than adding extra mark-up and javascript purely to support a heavily outdated browser. Why add extra mark-up and javascript just to achieve rounded corners and shadows? IE users can live without these minor aesthetic effects, we shouldn’t be bloating our code for their sake. The only thing I can see the worth in is forcing IE to support HTML5.

    Adding all this extra mark-up and relying on javascript for key functionality (the HTML5 fix) goes against modern web standards and accessibility.

  8. Posted February 1, 2010 at 9:28 pm | Permalink

    Nice collection, thanks a lot! Do you know about ie7-js? Helped me a few times..

  9. Posted February 1, 2010 at 9:49 pm | Permalink

    Hi,
    that’s really useful post. I just needed some information how to make font shadow working on IE.
    Great work :)

  10. Posted February 1, 2010 at 10:01 pm | Permalink

    Super! I’m impressed with some of the clever javascript fixes developers have come up with, thank you for rounding them up here. I was just recently thinking about how great it would be to have stuff like this, so now I don’t have to write it myself!

    Good job, Jean-Baptiste!

  11. Posted February 1, 2010 at 10:17 pm | Permalink

    Good post :) But I never use IE, before I used Opera but now MF is my favourite browser :)

  12. Posted February 1, 2010 at 10:20 pm | Permalink

    Yeah, great article, but many of these things don’t pass the CSS validation !

    • Marc
      Posted May 24, 2010 at 4:19 pm | Permalink

      Which is why IE “isn’t on board” with CSS3 yet. Everyone seems to be pro FireFox here, so I guess I’m a minority here, and while this is a really good article, my life was a lot easier as a web designer, when all of these other browsers didn’t exist. Sure IE had it’s “quirks” but long ago, this was the only browser that I checked to make sure a website looked good in, and because I was checking websites in IE only, there was only a little extra code for the fancy stuff, and most of the fancy stuff isn’t necessary, so if something doesn’t show up in IE, who cares?

      If many of these things don’t pass CSS validation, is this because a lot of the other browsers are “jumping the gun” on CSS3? Is Microsoft really that slow? Or is Microsoft taking a little more time to test things before just releasing it?

      Just some things to think about.

  13. Posted February 1, 2010 at 10:38 pm | Permalink

    Thank you for the tips. However, I think you can’t really say that IE lacks innovation, because the filter property was added to IE more than 10 years ago when css3 didn’t even exist. By then, IE was already offering these features to web designers. If that’s not innovation to you, I don’t know what it is. I would say it is not innovation its problem, but lack of standards support.

  14. Eliseu
    Posted February 1, 2010 at 10:45 pm | Permalink

    Damn, we programmers are trying to make IE extinctic and you’re trying to bring it back! IE is bad for us and is bad for users, what’s the advantage? DirectX rare plugins? -.-’

  15. Posted February 1, 2010 at 11:12 pm | Permalink

    I Hate IE6 more than my mother-in-law :) . It Is Web Designers and Developers Hell!!! Burn in Hell IE and Bill Gates too!!! Long Life Google Chrome and Firefox!

  16. Tom
    Posted February 1, 2010 at 11:53 pm | Permalink

    Really awrsome, thanks for this writeup. Makes it a lot easier to deal with the daily problems occuring when using that non standards compatible browser.

  17. Posted February 2, 2010 at 12:08 am | Permalink

    @Codesquid & @Eliseu : Don’t worry, I’m with you. IE is 100% crap and we should get rid of it.
    The reason I wrote this post is that unfortunely, you’ll always find a boss or client who’ll force you to code an IE6-compliant site. Then, you may be happy to know the techniques I have featured in this post ;)

  18. Posted February 2, 2010 at 12:37 am | Permalink

    I admire that really work hard to manage, collect and post it, but….. I wouldn’t appreciate the post as we (web developers) are not going to take extra headache for dead one (IE6), we are just looking forward for its funeral to get ended. Please move forward.

  19. Posted February 2, 2010 at 12:48 am | Permalink

    I think all web developers should charge extra for compatibility for IE6.
    It is almost 10 years old and it’s definitely not obvious to try to meet it’s special needs.

    Anyway, great set of css tricks!

  20. Posted February 2, 2010 at 12:53 am | Permalink

    Any idea of the current percentage of IE6 users still out there?

    As a beginner developer I am still catering for IE6 as I don’t want to drive away any business, but it would be nice to start playing with CSS3!

  21. Adrian
    Posted February 2, 2010 at 1:55 am | Permalink

    I agree with Codesquid. Please, stop doing this kind of things to ‘get IE up to date’.. it’s an OLD and horrible browser, so treat it as it. Don’t try to keep it alive.
    And as Codesquid said, at least do not do it with minor aesthetics things like round corners or shadows..
    Thanks anyway.

  22. Posted February 2, 2010 at 7:42 am | Permalink

    Awesome, I like this what you have done

  23. Posted February 2, 2010 at 8:45 am | Permalink

    @Omer : Definitely. Most of the time fixing IE6 bugs takes more time than making a W3C valid code works on any other browser!

  24. Posted February 2, 2010 at 9:23 am | Permalink

    I think any extra energy put into making your product more ‘compatible’ with a shitty browser like IE is a waste of time.
    I’m actually considering to block visitors with IE…once I’ve re-designed/re-coded my sites!

    The more I make my site W3C compliant the more I see how shitty IE is…

    We as (humble) bloggers/developers/designer should take the lead, since most of our visitors are tech savy anyway and we should be able to make our visitors clear ‘why’!

  25. Posted February 2, 2010 at 10:36 am | Permalink

    Wow, awesome sumup of IE compatibility hacks and tricks!
    Thanks a lot! very helpful.

  26. Alex
    Posted February 2, 2010 at 12:25 pm | Permalink

    10 ways to make Internet Explorer act like a modern browser:
    1) Use Firefox Instead, be amazed
    2) Use Chrome Instead, be amazed
    3) Use Opera Instead, be amazed
    4) Use Safari Instead, be amazed
    5) Delete Internet Explorer Links from your desktop
    6) Delete Internet Explorer Links from your Quick Launch
    7) Delete Internet Explorer Links from your Start Menu
    8) Try to forget you ever used that garbage
    9) Kick Steve Ballmer in the Nuts
    10) Live happily ever after.

    • Posted July 14, 2010 at 3:21 pm | Permalink

      Unfortunately, no web designer or developer can just delete IE off of their browser; we have to keep in mind that a lot of our prospective users and our clients’ users still use it, so we need it to test our projects. Trust me, I wish I could just junk it!

  27. Posted February 2, 2010 at 12:32 pm | Permalink

    Great post, you know it is sad when a browser created by Microsoft, the very company that has lead us into the modern day by enabling us to use the internet, I am both amazed at these tips, and shocked that MS missed out on so much.

    I havent used internet explorer in years, I dont plan on using it again, personally I think that MS should simply give up and start talking with Mozilla or something.

  28. Posted February 2, 2010 at 2:57 pm | Permalink

    Very good article, and nice resources but i think what us web designers need to stop trying to make our website to look the same in every browser. Don’t necessarily need to. We need, yes, to adapt our style to different browsers, in the meanwhile encourage users to update or adopt better browsers for better U.I. experience.
    But really nice peace of code you have here!
    CG

  29. erikdana
    Posted February 2, 2010 at 3:22 pm | Permalink

    AHAHHAHA, that’s gold: “Internet Explorer isn’t well known for its sense of innovation”.

    I gotta say I knew almost all of those, but RGBA and multi-column are totally new to me, nice article!

    It is very dissapointing to have to write so many IE hacks for simple codes, css came to simplify everything and IE blew it, there are so many great and simple things in css… but we’ll have to wait until it’s cross-browser compatible ¬¬…

    it’s like getting a christmass present and not being able to use it.

  30. Posted February 2, 2010 at 4:11 pm | Permalink

    Nice post – f**** IE will never die – but with these tricks we kick IE to a new level… :-)

  31. Posted February 2, 2010 at 4:33 pm | Permalink

    Awesome. Thanks Jean.

  32. Posted February 2, 2010 at 5:38 pm | Permalink

    Being a designer that is FORCED to “make it work” in IE6 all day long, I’m SO glad to know I can finally code non-suck pages with some DECENT styling!

    As much as I can’t WAIT for the day that IE6 finally dies, this will definitely help me out for now. Thank you for sharing these tricks!

  33. Posted February 2, 2010 at 6:15 pm | Permalink

    Wonderful!! I love this article!!

  34. cg
    Posted February 2, 2010 at 6:33 pm | Permalink

    I read that worldwide, IE6 represents 10-15% of browser usage – however, I run the web site for my company and a full 40% of our visitors are still using it. I can’t tell 40% of our customers that they need to update their browser, especially since most of them work for companies that don’t allow users to make changes to their own computers.

    As always, the first rule of anything web related is “know your audience”.

    Therefore, as much as I’d like to see IE6 go (and I’m hoping that the recent security problems will force some of our client companies to seriously consider upgrading) anything that helps me serve these poor souls better is welcome.

  35. Posted February 2, 2010 at 7:03 pm | Permalink

    javascript fixes for IE’s css rendering flaws aren’t really fixes at all. they’ll ultimately decrease the performance of your site, especially on older/slower machines

  36. Posted February 2, 2010 at 7:26 pm | Permalink

    well, these are indeed a few usefull tips!
    but as a webdeveloper i still hope, that the nine year old ie6 is gonna die this year, and not celebrating his tenth birthday ;-)

  37. Posted February 2, 2010 at 8:16 pm | Permalink

    thanks for the post, I will be keeping it in my css bookmarks folder for later use. However I have to say my heart sank when I saw yet another title beginning ‘how to make IE6 ..’.
    Oh how I yearn for the day I never feel the need to read another one again! I can’t describe how much I hate that browser, and yet like many of the other people who commented it’s a job requirement.

  38. Posted February 2, 2010 at 8:17 pm | Permalink

    What about ie7.js and ie8.js? I wish their was a javascript (jQuery?) plugin that could find any CSS3 or certain selectors and margin bugs and add the functionality to IE as necessary. I would even pay for that.

  39. Posted February 2, 2010 at 10:19 pm | Permalink

    I agree w/alex, just kill the damn thing.
    nice post
    thank you!

  40. Posted February 2, 2010 at 10:59 pm | Permalink

    This is a really great set of resources!! I’m excited to implement a few of these!

    Andrew Rodgers

  41. Posted February 2, 2010 at 11:16 pm | Permalink

    … dreaming of a world without gates nor windows…

    :p :p :p

  42. Posted February 3, 2010 at 3:05 am | Permalink

    Great work. Thanks.

  43. Posted February 3, 2010 at 5:10 am | Permalink

    Excellent article, but I still hate IE 6,7,8 and beyond!

  44. Posted February 3, 2010 at 8:25 am | Permalink

    It seems that DD roundies is not working for IE8. Does anyone know a better solution?

  45. Posted February 3, 2010 at 12:18 pm | Permalink

    Great Post! But I hate the IE versions as well. They are the reason, why developers have to spend so much time into especially the frontend development.

  46. Posted February 3, 2010 at 7:23 pm | Permalink

    Supporting IE6 is a pain. I don’t think writing in HTML5 is a viable option until it’s dead, unless of course you don’t mind relying entirely on Javascript.

  47. Posted February 4, 2010 at 11:59 am | Permalink

    Competition is supposed to encourage development but with browsers it seems many just pick and choose which features to impliment. More browsers mean more headaches for designers. Why anyone would still use a non complient browser is beyond me but they do!

    I was a little fedup with my hacks in my CSS files and a few months ago I adopted a simpler, approach.

    If it don’t work in all browsers I don’t use it. My life is now so much easier and I don’t get calls from clients with layout issues in latest browser versions.

    It takes a lot more planning and some clever layout but the resulting css code is a lot easier to manage and more predictable.

    The other advantage is that my approach creates valid CSS.

  48. Posted February 4, 2010 at 3:26 pm | Permalink

    Excellent compilation. But please, please let IE die. Let us all guide it to it’s bautiful demise by refusing to use/support it.

  49. Posted February 4, 2010 at 3:26 pm | Permalink

    A agree with Codesquid. E must fight against old browsers and not support them when possible.

  50. Posted February 4, 2010 at 3:30 pm | Permalink

    Great article, really useful stuff. IE really is the bane of my life so some of these tips will come in handy :)

  51. Posted February 4, 2010 at 3:33 pm | Permalink

    Good, because it is interesting to see other solutions, which sometimes are very clever and creative.

    Bad, because:
    * If implemented incorrectly, it may mess up other stuff. (different browsers, javascript problems etc)
    * Performance (both bandwidth and rendering)
    * Microsoft won’t care as much about implementing new standards, and following the current ones.

  52. Posted February 4, 2010 at 3:41 pm | Permalink

    I think Microsoft should be banned from making another version of internet exploring, or they should just make a Webkit based browser.

    The fact that IE 8 has no support for any CSS3 and IE 9 is set not to, means a headache for us all.

    Microsoft should include a silent upgrade feature in IE to upgrade it to work with the latest bits of code and to render new CSS elements, rather than being crap and forever being crap.

    The minimum microsoft should do is deploy a windows update that forces your PC to upgrade to IE8, though FireFox pref :)

  53. Dan
    Posted February 4, 2010 at 3:42 pm | Permalink

    Great post! Solved a couple problems for me!

  54. Danilo Riedel
    Posted February 4, 2010 at 4:14 pm | Permalink

    Take a look at this…

    http://code.google.com/p/ie7-js/

    Some times take a bit longer to load, but it’s a lovely solution!

  55. Gaetan
    Posted February 4, 2010 at 4:35 pm | Permalink

    Position Fixed on IE6 using .htc (no hassless with disappearing scrollbars or other)
    http://www.html.it/articoli/3074/demo2.html

  56. Justlooking
    Posted February 4, 2010 at 5:30 pm | Permalink

    The best JavaScript fix you can do is detect the browser is IE and then facilitate to the knucklehead using it the link to a modern browser

  57. Posted February 4, 2010 at 5:49 pm | Permalink

    really nice post. being XHTML/CSS coder .. it gonna really helpful for me . great :)

  58. Posted February 4, 2010 at 8:22 pm | Permalink

    IE must die… but thanks for the tips

  59. Posted February 4, 2010 at 8:35 pm | Permalink

    Great stuff! I’m very glad you did this. Soo helpful to make IE behave/look more like what we ACTUALLY want our sites to look like!

  60. Posted February 5, 2010 at 3:28 am | Permalink

    Great post, I must thank you for sharing.

    I didn’t even realize there was a CSS3 workaround for IE!

  61. Posted February 5, 2010 at 3:11 pm | Permalink

    IE has long frustrated me. On my own projects I have now put a “please upgrade your browser to one that supports standards” It shows a screen shot of what the page should look like and how different this is to the standard IE hack stylsheet i’ve had to use.

    Helpful tips as usual, I haven’t really looked into CSS3 until now!

  62. Posted February 5, 2010 at 4:35 pm | Permalink

    “Like many other web developers, I definitely hate Internet Explorer”. So do I, firefox all the way.

  63. Posted February 6, 2010 at 5:04 am | Permalink

    Since IE is already the slowest browser out there, it seems ironic that we need to use additional javascript to add visual enhancements

    at most, javascript should only be used to compensate for HTML5

  64. Paul
    Posted February 7, 2010 at 6:24 pm | Permalink

    What about installing Google’s Plugin?

    No links? This is just… lol

  65. Posted February 7, 2010 at 7:09 pm | Permalink

    @Paul : Yeah, I’m tired to see links in comments, excepted a few which a truely relevant. And I don’t see where’s the problem.

  66. Posted February 8, 2010 at 4:43 pm | Permalink

    While waiting for IE to die…

    Thank you for this useful post !

  67. Posted February 8, 2010 at 7:44 pm | Permalink

    well excellent post dude…

    but i really wish that stupid browzer will end up soon…..
    i hate internet explorer :P than anything available online..

    stil thnx alot for the hacks.. i really need that round corner one :)

  68. Posted February 8, 2010 at 8:13 pm | Permalink

    great article i moved from ie to firefox its ok but now armed with these i might give ie another try thanks for a great post.

  69. Posted February 9, 2010 at 9:02 pm | Permalink

    Since using firefox, I forgot IE. Firefox is the best with it’s plugins and add ons. I think only few people still using IE.

  70. Ruana
    Posted February 10, 2010 at 7:33 pm | Permalink

    First of all:
    @Jean-Baptiste, thank you for summarizing things up like this.

    To other readers, e. g. @Codesquid, @Adrian, @Alex , @Eliseu and some more who advise us to “ddelete Internet Explorer”, or to “stop trying to ‘get IE up to date’ and @Ncus who wants us to “R.I.P.” IE for good – I can only imagine that you never work for clients and code websites just for your own personal pleasure.

    When I’m designing a site for fun (a personal blog, etc.) I also feature a fancy banner asking my visitors to use a “modern browser” if they surf with IE prior to version 8 (or sometimes 7) but if you design for a broader audience (which is usually the case, esp. when you design for a client) you simply can’t do that. I don’t have the precise percentage of IE6 users at hand but the average is still 15% – 20%. And that’s huge! You can’t ignore that.

    It will take at least two to three more years until we can safely forget about IE6 for clients websites too. For now, the best thing to do is to enlighten, inform and educate users on the subject.

    I’m usually a person that honors others opinions – but to tell people to r.i.p. IE today is …. well…. think again, man!

  71. Posted February 10, 2010 at 8:02 pm | Permalink

    Biggest problem with ie is not personal use. People at home can choose which browser to use, and mostly use modern browsers. Problem with old browsers is mostly in big companies where you dont have permission to install software that you like, and you need to ait for system administrators to update to new versions.
    Thats why we still need to support IE on some of websites that create, we do selection based on visitors profile.

    Tnx for really helpfull article.

  72. Posted February 12, 2010 at 2:59 pm | Permalink

    Oh my god its such a horrible browser, can we not just let it die, please!!

  73. Posted February 12, 2010 at 5:44 pm | Permalink

    Great post! IE6 is still used far too much to stop developing for so these workarounds will come in handy for some time i would guess!

  74. Posted February 13, 2010 at 8:29 am | Permalink

    I think you can’t really say that IE lacks innovation, because the filter property was added to IE more than 10 years ago when css3 didn’t even exist. By then, IE was already offering these features to web designers.

  75. Posted February 17, 2010 at 3:15 pm | Permalink

    Fantastic post! These are great tips, although to be honest I can’t believe anyone actually still uses IE.

  76. Posted February 17, 2010 at 10:21 pm | Permalink

    Like many other web developers, I definitely hate Internet Explorer, especially the version 6.

    I do not understand why most developers hate the windows 6.0. Pls enlighten me.

  77. Posted February 21, 2010 at 6:24 pm | Permalink

    Apart from HTML5 and CSS3 I’d like to mention SVG (Scalable Vector Graphics, w3c standard since 2001). While modern browsers support this standard (e.g. Firefox since 1.5) ie does not to this day (v8).

    Check out the SVG Web javascript library, that lets you draw your standard compliant SVG markup in Internet Explorer using the Flash 9+ plugin, thus making Internet Exolorer act like a modern browser in this respect too.
    http://code.google.com/p/svgweb/

  78. Posted February 23, 2010 at 12:50 am | Permalink

    I am looking these codes for years. thanks for the share! it is very useful. :D

  79. Posted February 24, 2010 at 2:21 am | Permalink

    The title and image made me take a look and there are some nice ideas but it will be a cold day in hell before i use IE again :D

    Paul.

  80. Posted February 28, 2010 at 1:33 pm | Permalink

    This is great but what about Opera?

  81. Posted March 2, 2010 at 7:40 pm | Permalink

    Personally, I think IE should burn in hell for what it has done.

  82. Posted March 7, 2010 at 3:48 pm | Permalink

    hey guys sorry but …. :( youtube killed IE

  83. Posted March 23, 2010 at 10:00 pm | Permalink

    These are some good tips. My favorite though is redirecting IE users to a page saying it’s not supported. Unfortunately that’s often not an option.

  84. Steve
    Posted March 26, 2010 at 9:40 am | Permalink

    Jean, this is really a nice post. I actually read it through from top to bottom including all the interesting comments, to which I replied to (just having fun while I do that). People like you are the ones who provide the winds on which other developers ride. I’ve seen a couple of these hacks scattered all over the web, but you’ve taken the pain to bring them all together in one place.

    @Microsoft: It’s just too sadding that the so called ‘biggest sotware company’ in the world cannot bring together good heads to come up with a standard web browser given the market share of windows OS and IE. In my opinion, I think Microsoft is probably too arrogant to adopt standards created by other people, and hence trying to create it’s own world which has been lost long time ago at the birth of the Open Source movement. I sincerely agree with those who are of the opinion that support for crappy web browsers like IE6, IE7, IE8, IE9, IE10, IE∞ should be dropped so we can all be free and move forward into doing some cool stuff with our time other than fixing the problem of Microsoft.

    Dropping support for IE may not look feasible now, but I know for certain, that this is the best solution. Developers are the shapers of the web, we’ve always shaped the web, and we can really do this if we really want to ‘cos I’m sick and tired of IE.

    Great job man!
    God bless you.

  85. Posted March 30, 2010 at 7:59 am | Permalink

    How suck is IE6!
    There is a lot of code that must be embedded to support the old, stupid IE6 and that will be a nightmare for modern web designers. Is there another way to “support” IE6, for example, by forcing the IE6 users to use latest IE version, maybe? :D

  86. Nicholas Camp
    Posted April 11, 2010 at 10:52 pm | Permalink

    OMG Thank you very much! I really enjoyed that! Thanks again!

  87. Posted April 27, 2010 at 1:42 am | Permalink

    I’m another person that really can’t stand IE at all. I also agree with Codesquid, putting lipstick on a pig doesn’t cover up the fact that it still is a pig. :)

    Firefox all the way…with Chrome not far behind.

  88. Posted June 11, 2010 at 1:27 pm | Permalink

    Sometimes i wish IE would never exist and people stop using it, so much trouble fixing layouts for IE…

  89. Posted June 21, 2010 at 1:29 am | Permalink

    I think Bill Gates must had warned his staff not to comply with the rest of the world…

  90. Posted June 21, 2010 at 1:49 am | Permalink

    (cont’d) For the more he complies, the more he will be sued… He was so tired up and down the courts!

23 Trackbacks

  1. [...] 10 ways to make Internet Explorer act like a modern browser By tokotaku Ever heard about HTML5? If you’re interested in web development, there’s no doubt about it. For those who doesn’t know, HTML5 is the next major revision of HTM; the core markup language of the World Wide Web. Most modern browser can already handle, at least partially, the new HTML5 recommendations. … Read on Cats Who Code [...]

  2. By James A. Arconati - links for 2010-02-01 on February 2, 2010 at 5:30 am

    [...] 10 ways to make Internet Explorer act like a modern browser Like many other web developers, I definitely hate Internet Explorer, especially the version 6. At a time where new and powerful techniques as such as HTML5 and CSS3 are emerging, it’s not surprising that IE can’t handle them correctly. Luckily, a few tricks can make your life easier. (tags: tips internet microsoft microsoft/internet-explorer web-developer web-developer/tools web-developer/css blogs) [...]

  3. [...] Enlace | Cats who code [...]

  4. [...] 10 ways to make Internet Explorer act like a modern browser. Faltaría el 11, dejar de usarlo. [...]

  5. [...] 10 ways to make Internet Explorer act like a modern browser [...]

  6. By Fresh From Twitter today | zu-web.de on February 2, 2010 at 11:43 pm

    [...] nu mijn theme dus RT @sixrevisions: 10 ways to make Internet Explorer act like a modern browser – http://bit.ly/aPogGVI hear I am making a strong internet appearance again.Me piden dinero (110k) para invertir en un [...]

  7. By Linkeria (2. Februar) » der tag und ich on February 3, 2010 at 12:01 am

    [...] 10 ways to make Internet Explorer act like a modern browserGleich 10 tolle Tips für <strike>die moderne Hausfrau</strike> den interessierten Webentwickler. Via Codecandies. [...]

  8. By Shared Items – 03/02/2010 | Of Penguins & Coffee on February 3, 2010 at 8:12 am

    [...] 10 ways to make Internet Explorer act like a modern browser [...]

  9. By Mes favoris du 1-02-10 au 3-02-10 » Gilles Toubiana on February 3, 2010 at 11:20 am

    [...] 10 ways to make Internet Explorer act like a modern browser  [...]

  10. By minicore.de on February 4, 2010 at 3:25 pm

    [...] habe ich einen echt hilfreichen Artikel gefunden zum Thema Internet Explorer Kompabilität. “10 ways to make Internet Explorer act like a modern browser” Zeigt für einige der neuen Web Methoden wirkungsvolle [...]

  11. [...] 10 ways to make Internet Explorer act like a modern browser [...]

  12. By Pick of the Links #5 | Union Room Blog on February 5, 2010 at 12:13 pm

    [...] 10 ways to make Internet Explorer act like a modern browser [...]

  13. By delicious Links: 05. February 2010 on February 7, 2010 at 1:01 am

    [...] 10 ways to make Internet Explorer act like a modern browser 10 ways to make Internet Explorer act like a modern browser – ie html5 css3 Tags: modern browser ie html5 css3 [...]

  14. By dot Blog. The week in links 08/02/10 on February 8, 2010 at 1:03 pm

    [...] 10 ways to make Internet Explorer act like a modern browser (catswhocode​.com) [...]

  15. By IE6を使う人はまだまだ多い | AZ::Blog on February 13, 2010 at 11:40 pm

    [...] ◇10 ways to make Internet Explorer act like a modern browser 別れる理由 (1)著者: 小島 信夫出版: 講談社 [...]

  16. [...] 10 Ways to Make Internet Explorer Act Like a Modern Browser [...]

  17. [...] 10 modi per rendere internet explorer un browser moderno [...]

  18. [...] Official Link [...]

  19. [...] 10 Ways to Make Internet Explorer Act Like a Modern Browser [...]

  20. By How I make money…on Twitter on March 5, 2010 at 9:22 am

    [...] of my Cats Who Code posts are retweeted up to 700 times. How it is possible? First, I use a Tweetmeme button which allow my readers to share my posts [...]

  21. By CSS3 Generator | WordPress Dimensie on March 15, 2010 at 5:29 am

    [...] Jean-Baptiste Jung heeft een tijdje terug een mooi overzicht gemaakt hoe je met verschillende filters in Internet Explorer verschillende CSS3 eigenschappen kunt [...]

  22. [...] 10 ways to make Internet Explorer act like a modern browser [...]

  23. [...] (in moderation please!). And if you really want to get things looking pretty similar in IE here are 10 Ways to Make Internet Explorer Act Like a Modern Browser. Even so, it’s good to keep in mind that your site doesn’t need to look identical (not that it [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe without commenting

  • Smashing Network
  • Hosted by VPS.net and Akamai CDN
WordPress Appliance - Powered by TurnKey Linux