After some trial and error and a long discussion on the Concrete5 forum, this is the setup I’m using successfully for incorporating the excellent CSS3 PIE for rendering CSS3 styles in old IE.

1) Put in the site root.

2) In the theme’s header.php, I link a conditional stylesheet for IE8:

3) In ie8.css, I add the elements from the main screen.css that need to have CSS3 PIE applied for gradients, rounded corners or shadows:

Don’t forget to use position: relative.

CSS inheritance chainBack last fall I started using normalize.css instead of the very popular HTML reset that came standard with my current theme framework of choice. I like it a lot and have stopped using resets completely. I’ve customized it to fit my project needs and prefer it to resets for a few reasons:

  • It doesn’t target every existing HTML element – only those that really need normalizing, according to the developer’s research in major browsers.
  • It keeps browser defaults that are useful and attempts to make them render more consistently across major browsers.
  • It works fine on IE6+. I currently support down to IE7 so this is nice.
  • It fixes some common browser bugs that resets normally don’t touch.
  • And the big one that makes me really love it: less clutter when debugging.

As an example of the last point, here’s the kind of thing you see with a reset in place, using Chrome Developer Tools to ‘Inspect Element’ (see image to the right). normalize.css doesn’t use many blanket rulesets that include a large number of selecters like resets do.

Here’s a nice overview of normalize.css from the developer Nicolas Gallagher.