In light of the nice comments on my previous post on this topic I’m going to share how I’m doing this now, it’s a little easier to manage for me, at least and may be for others.
I’m adding this to functions.php instead of the my_render_ie_pie function I used before, using the WordPress function wp_enqueue_style, the preferred way to add styles to the rendered page:
|
1 2 3 4 5 6 7 8 9 |
/** * Attach CSS3PIE behavior to elements and add conditional comments */ global $wp_styles; wp_enqueue_style( "ie8", "http://www.redkitecreative.com/projects/wp-content/themes/theme/css/ie8.css", false, $version_identifier, "all"); $wp_styles->add_data( "ie8", 'conditional', 'IE 8' ); global $wp_styles; wp_enqueue_style( "ie7", "http://www.redkitecreative.com/projects/wp-content/themes/theme/css/ie7.css", false, $version_identifier, "all"); $wp_styles->add_data( "ie7", 'conditional', 'IE 7' ); |
And then ie8.css just has this, a list of styles that need border radius or some other CSS3 feature:
|
1 2 3 4 |
input.button, input#submit, input.button:hover, input#submit:hover { position: relative; behavior: url(/PIE.htc); } |
Notice that all elements that need PIE must have position: relative.
ie7.css is longer (surprise!) but has the same PIE.htc section as above.
I find this easier to get my head around, plus it cleans up functions.php and loads IE stylesheets the proper way.
Related posts:
- Using CSS3 PIE in WordPress custom themes Boy, was this a huge pain to figure out. I’m...
- WordPress – only load CSS stylesheets on pages that need them This is a followup to my previous post on adding...
- Relaunch Just launched the redesign of my business site, redkitecreative.com. I...
thanks this helped me alot , its very frustrated working with .css files and different browsers when wordpress noobie
You’re very welcome – it’s sometimes tricky to figure out how to do this kind of thing in WordPress.