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.
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.
{ 20 comments… read them below or add one }
Hehe…. great to see some tricks in IE! No one writes about IE except about its vulnerabilities 😀 anyway… thanks for sharing mate 😀
.-= Pubudu Kodikara´s last blog ..TechHamlet Forums :Latest Forum Topics (9th of March 2010) =-.
I am happy that it would be useful.. 🙂
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 =-.
This is really cool buddy, the best part is it can be done with IE, thanks for sharing.
Yeah it works on IE, just wanted to share the tweaks.. 😉
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 =-.
I’m not hate IE but I prefer Firefox =)
Go Green! Liked Your Logo
.-= Chethan´s last blog ..Download IPL 2010 Schedule – IPL 3 Matches [ March 12 to April 25 ] =-.
Thanks mate…It’s designed by my buddy Aditya.
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 .
Yeah buddy firefox supports HTML5, IE requires the code implementation.. 😉
Hey buddy, these are some good hacks. Thanks for sharing
.-= Rahul Jadhav´s last blog ..Twitter AutoFollower: A Smart Way To Get More Followers =-.
The info I was looking for. Bookmarked!
.-= Basant Singh´s last blog ..Develop SaaS on OrangeScape PaaS to Run on any Cloud Infrastructure =-.
Nice , i am rarely using IE
.-= Anish K.S´s last blog ..Win a trip to the Malaysian F1 Grand Prix with AVG Technologies =-.
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 =-.
Awesome post… I always try to keep my designs IE friendly.. This post sure does help…
.-= Siddhu´s last blog ..Space Myths Busted =-.
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 =-.
Hey Thanks man its of great help. Keep posting some new and interesting things in future.
Whats up with all those tags? Nice work though!
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.