Top 5 Ultimate Internet Explorer Designing Hacks

by Shubham on March 9, 2010

Every Web Designer hates Internet explorer, I too hate Internet explorer for many reasons (especially IE6). HTML 5 and CSS3 are the most powerful techniques of creating a good design but IE can’t handle them. Few tricks can do some work to give a good look in Internet explorer. The hacks like creating rounded corners, embedding HTML5, text and box shadow, Opacity are been given here.

Internet explorer hacks Top 5 Ultimate Internet Explorer Designing Hacks

Internet Explorer hacks

Here are few tweaks for Internet Explorer to make your Blog look on Internet explorer:

HTML5 For IE

HTML5 is very powerful, it is the major advancement of HTM: the core markup language of the World Wide Web. most of the browsers handle HTML 5 very good but for IE it can be pretty difficult. It simply ignores the markup. The html5.js can do the work for you. Embedding it can be pretty easy. You can hotlink/add the script anywhere in as shown in example below.

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

Text Shadow In IE 6 With CSS

Due to recent implementation of text shadow in Firefox 3.5, it has been in use by every web designer. But this doesn’t work with Internet Explorer. IE-only filter property can create text-shadow quite well. As filter isn’t a standard CSS property so it should be isolated from different codes.

Implementation of CSS shadow effect in IE can be done as below:

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

CSS Box Shadow in Internet Explorer

Box shadow can be done in IE with simple codes. It is the coolest trick for creating HTML elements without using alpha channel png images. Saves load time and makes looks very impressive. A real impressive look.

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

But for IE you still can’t get the shadow with the above property. You will have to use filter proprietary property. To implement it, here’s what you have to do.

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

Rounded Corner’s in Internet Explorer

Rounded corner’s is an way to get a good looking smooth corners. They are very popular in Web 2.0 because of its easy implementation without the use of images. For those who don’t know here’s an example-

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

For IE rounded corners can be implemented by adding a JavaScript. DD roundies is a small JavaScript which can round HTML elements the way you need. The code can be explained as -

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

You can download the JS file from here.

Opacity in Internet Explorer

It is one of the coolest feature used by web designers. Again for IE opacity can be given by filter CSS property that can help to attain opacity. The example can be shown as-

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

These are some of the cool hacks in Internet Explorer that can make your design compatible with IE. If you have any question’s feel free to comment.

  • Similar Articles

    { 20 comments… read them below or add one }

    avatar Pubudu Kodikara March 9, 2010 at 9:35 pm

    Hehe…. great to see some tricks in IE! No one writes about IE except about its vulnerabilities :D anyway… thanks for sharing mate :D
    .-= Pubudu Kodikara´s last blog ..TechHamlet Forums :Latest Forum Topics (9th of March 2010) =-.

    Reply

    avatar Shubham March 9, 2010 at 9:37 pm

    I am happy that it would be useful.. :-)

    Reply

    avatar Loveish March 9, 2010 at 10:15 pm

    I think its the first time I read something like this about IE. Thnx mate for sharing this :)
    .-= Loveish´s last blog ..18 Mozilla Firefox Addons For Webmasters And Bloggers =-.

    Reply

    avatar Suhasini March 9, 2010 at 11:09 pm

    This is really cool buddy, the best part is it can be done with IE, thanks for sharing.

    Reply

    avatar Shubham March 9, 2010 at 11:21 pm

    Yeah it works on IE, just wanted to share the tweaks.. ;-)

    Reply

    avatar Shiva@ WP Shopping Pages March 9, 2010 at 11:31 pm

    Internet Explorer has come of age, I really do not find any profit in using it. Yes, I agree from a designer’s point of view our site’s must be cross browser compatible and Thanks for the great tips mate. I am learning web designing right at this moment your tips certainly comes of big help. I think Firefox and Chrome have totally dethroned IE
    .-= Shiva@ WP Shopping Pages´s last blog ..WP Shopping Pages Plugin – Create your own affiliate store using Wordpress =-.

    Reply

    avatar blinkky March 10, 2010 at 12:02 am

    I’m not hate IE but I prefer Firefox =)

    Reply

    avatar Chethan March 10, 2010 at 2:20 pm

    Go Green! Liked Your Logo
    .-= Chethan´s last blog ..Download IPL 2010 Schedule – IPL 3 Matches [ March 12 to April 25 ] =-.

    Reply

    avatar Shubham March 10, 2010 at 6:00 pm

    Thanks mate…It’s designed by my buddy Aditya.

    Reply

    avatar siddharth March 10, 2010 at 4:16 pm

    Nice trick .
    HTML 5 is just amazing . And interesting thing is that we have to enable it via pasting above code in IE ,but in firefox v3.6 it has already got html 5 .

    Reply

    avatar Shubham March 10, 2010 at 6:03 pm

    Yeah buddy firefox supports HTML5, IE requires the code implementation.. ;-)

    Reply

    avatar Rahul Jadhav March 10, 2010 at 4:58 pm

    Hey buddy, these are some good hacks. Thanks for sharing
    .-= Rahul Jadhav´s last blog ..Twitter AutoFollower: A Smart Way To Get More Followers =-.

    Reply

    avatar Basant Singh March 14, 2010 at 9:39 am

    The info I was looking for. Bookmarked!
    .-= Basant Singh´s last blog ..Develop SaaS on OrangeScape PaaS to Run on any Cloud Infrastructure =-.

    Reply

    avatar Anish K.S March 15, 2010 at 8:52 pm

    Nice , i am rarely using IE
    .-= Anish K.S´s last blog ..Win a trip to the Malaysian F1 Grand Prix with AVG Technologies =-.

    Reply

    avatar Ramkumar March 22, 2010 at 10:00 pm

    Rendered Corners, I face this problem, Both Internet Explorer and Opera (Latest version) doesnt support rounded corners. Thanks for the info mate.
    .-= Ramkumar´s last blog ..Computer Alarm Clock =-.

    Reply

    avatar Siddhu March 23, 2010 at 11:50 am

    Awesome post… I always try to keep my designs IE friendly.. This post sure does help…
    .-= Siddhu´s last blog ..Space Myths Busted =-.

    Reply

    avatar Mad Geek @beingPC March 24, 2010 at 12:54 am

    I don’t use IE much but when it comes to tweaking I can try to get the results.
    .-= Mad Geek @beingPC´s last blog ..Giveaway: 20 Licenses of IP Privacy Pro =-.

    Reply

    avatar Soumyajit banerjee September 20, 2010 at 10:18 am

    Hey Thanks man its of great help. Keep posting some new and interesting things in future.

    Reply

    avatar Umairp September 23, 2011 at 3:19 pm

    Whats up with all those tags? Nice work though!

    Reply

    avatar get adsense approved October 9, 2011 at 9:05 am

    Nice post some tuts for firefox or other browser to well firefox is best i think we don’t need to customize our website well thanks great share.

    Reply

    Leave a Comment

    CommentLuv badge

    Previous post:

    Next post: