CSS3 PIE

Microthemer comes pre-integrated with CSS3 PIE which can be enabled by on a global or per-selector basis. CSS3 PIE makes Internet Explorer 6-9 render CSS3 properties like gradients, border-radius and box-shadow correctly. We recommend that you visit the CSS3 PIE site to learn more about it.

One of the main drawbacks with PIE is that it is very frequently necessary to give elements a "position" value of "relative" when also assigning CSS3 properties to them. To make this less tedious, Microthemer automatically applies "position:relative" when you set CSS3 properties (if you have enabled CSS3 PIE).

You can still use PIE and turn off the automatic "position:relative" by explictly setting the "position" value to something else (e.g. "static", "absolute" or "fixed"). However, sometimes it's better to just not use CSS3 PIE and allow corners to be square or backgrounds to be solid colors in old Internet Explorer versions that don't support CSS3 properties.

Some Known PIE Shortcomings

  • PIE does not currently work when applied to the "body" Selector
  • Element types that cannot accept children (e.g. "input" and "img") will fail or throw errors if you apply styles that use relative length units such as em or ex. Stick to using px units for these elements (Microthemer automatically applies "px" to numerical values if no unit is set - apart from line-height as it is a valid (and useful) not to include a unit).
  • There is another work around that avoids the "position:relative" fix mentioned above. You can make the ancestor element "position:relative" and give it a z-index. An ancester element is an element that contains another element. With WordPress, the "post" element will be the "ancester" of any content inside the post such as text, meta information, and images.

Donate to PIE: PIE is Free for everyone. Please consider donating to the PIE project if it has helped you.

Themeover CSS Reference

Close