<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>
- 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.
- setting a radius for all four corners
- element borders
- setting a radius for individual corners separately
- blur size
- offset
- any color other than #000
- blur size
- offset
- color
- the shadow looks a little bit different than it does in ff/safari/chrome, i'm not sure why
<div class="box2"><div>this cat does not approve of square corners.