<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:[list][*]set the z-index of the ie-css3 element to a number [b]larger[/b] than its surrounding elements.
[*]make sure the ie-css3 element is positioned, such as with <code>position: relative</code> or <code>position: absolute</code>
[/list]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:[list][*]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.
[/list]<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> [list][*]setting a radius for all four corners
[*]element borders
[/list]</td><td> [list][*]setting a radius for individual corners separately
[/list]</td></tr><tr><td>box-shadow</td><td> [list][*]blur size
[*]offset
[/list]</td><td> [list][*]any color other than #000
[/list]</td></tr><tr><td>text-shadow</td><td> [list][*]blur size
[*]offset
[*]color
[/list]</td><td> [list][*]the shadow looks a little bit different than it does in ff/safari/chrome, i'm not sure why
[/list]</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.