CSS3 support for Internet Explorer 6, 7, and 8

     
<div class="box1"><h3>what is it?</h3>ie-css3 is a script to provide internet explorer support for some new styles available in the upcoming css3 standard.
<h3>how it works</h3>if you're viewing this page in internet explorer, some of the elements have been rebuilt by the script in vector markup language (vml), an ie-specific vector drawing language. vml supports things that are missing from ie's css implementation like rounded corners and blur effects.
<h3>how to use it</h3> just add css styles as you normally would, but include one new line:
should work if ie-css3.htc is in the root directory of the site.
<p class="nomargin">you will probably run into issues with z-index, especially if embedding one ie-css3 enabled element inside of another. there are two simple workarounds:

• set the z-index of the ie-css3 element to a number larger than its surrounding elements.
• make sure the ie-css3 element is positioned, such as with <code>position: relative</code> or <code>position: absolute</code>

sometimes an ie-css3 element will show up at a slightly different position than the original, untouched element. there could be a few reasons for this:

• you have broken tags somewhere in your markup, probably above the ie-css3 element.
• you are experiencing misc ie6 and ie7 bugs. try adding the styles <code>zoom: 1</code> and/or <code>position: relative</code> to the ie-css3 element and its immediate parent. you could also try removing any margins on the ie-css3 element and/or its parent, use padding instead.

<h3>styles and their status</h3><table border="0"><tbody><tr><th>style</th> <th>what works</th> <th>what doesn't work</th> </tr><tr><td>border-radius</td><td>

• setting a radius for all four corners
• element borders

</td><td>

• setting a radius for individual corners separately

</td></tr><tr><td>box-shadow</td><td>

• blur size
• offset

</td><td>

• any color other than #000

</td></tr><tr><td>text-shadow</td><td>

• blur size
• offset
• color

</td><td>

• the shadow looks a little bit different than it does in ff/safari/chrome, i'm not sure why

</td></tr></tbody></table><h3>todo</h3>a better site for this script
<div class="box2"><div>this cat does not approve of square corners.