Top 5 Ultimate Internet Explorer Designing Hacks

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.

Similar Articles

8 Best Helpful Online Code Editors

Cool Follow Me Gadget WordPress/Website Mash Gadget

Test Your Cross Browsing Compatibility

WP Paging Plugin WordPress

Creating Offline Html5 Web Applications