Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Rounded Corners and other CSS 3 Features for Internet Explorer with CSS3Pie

Parent Feed: 

We’re going to be adding CSS3 features for IE to Bartik, Drupal 7 core theme.

CSS3 for IE in Drupal

This is how it looks in IE 8. Predictably, no CSS 3 goodness.

CSS3 for IE in Drupal

If you want IE to look like modern browsers, there’re several ways to deal with it. Personally, I wanted to find a solution that didn’t involve more javascript or browser hacks. Enter CSS3Pie. The front page has a demo where you can try it out (open the page with IE to see it in action).

CSS3 for IE in Drupal

CSS3Pie is very simple: to trigger it, you need to download PIE.htc file and add just one line to your css properties with the path to the PIE.htc file :

behavior: url(/PIE.htc)

If you use Drupal, you have to cpecify the full path to the file (ex: sites/all/themes/your_theme/PIE.htc).

CSS3 for IE in Drupal

Check the theme, and now it’s working.

To fix the gradients, add the following line:

-pie-background: linear-gradient (color1, color2)

CSS3 for IE in Drupal

Note that sometimes you need to add position relative to the target element or its parent. Consult with the CSS3PIE documentation for possible issues and examples of usage. As usual, don’t forget to clear your cache if you have it turned on and keep in mind that IE can’t load more than 31 stylesheets at a time.

Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web