Install CSS3 PIE in concrete5 theme
Permalink
Does anyone know how to install CSS3 PIE in a concrete5 theme? I can't seem to get it to work.
If you mean PIE.htc, you can upload it into the same directory as your theme and call it from your CSS.
I usually create a directory in the theme called htc and place the file in it like
and call it in the css file with this(note: no quotes)
This way needs the css file to be called like this in the theme
getStyleSheet() finds all the urls and adds the theme path to them.
/mytheme/htc/PIE.htc
and call it in the css file with this(note: no quotes)
.some-rounded-borders { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; behavior: url(htc/PIE.htc); }
This way needs the css file to be called like this in the theme
<link rel="stylesheet" type="text/css" href="<?php echo $this->getStyleSheet('mycssfile.css') ?>" />
getStyleSheet() finds all the urls and adds the theme path to them.
Sweet! Thanks ^_^
I follow what you're doing here but I can't get PIE to work. Here's what I've done:
In header.php:
In ie8.css I have:
And in my theme file I have /htc/PIE.htc, but this isn't working in IE8. Can someone help?
In header.php:
<!--[if lte IE 8]> <link rel="stylesheet" type="text/css" href="<?php echo $this->getStyleSheet('ie8.css') ?>" /> <![endif]-->
In ie8.css I have:
body { background: -moz-linear-gradient(top, #649697 16%, #234646 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(16%,#649697), color-stop(100%,#234646)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #649697 16%,#234646 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #649697 16%,#234646 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #649697 16%,#234646 100%); /* IE10+ */ background: linear-gradient(to bottom, #649697 16%,#234646 100%); /* W3C */ behavior: url(htc/PIE.htc); }
And in my theme file I have /htc/PIE.htc, but this isn't working in IE8. Can someone help?
You don't need PIE anymore.
Paste this into your .htaccess file.
It should get IE8 to render gradients and rounded corners.
Paste this into your .htaccess file.
<IfModule mod_headers.c> BrowserMatch MSIE ie Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie </IfModule>
It should get IE8 to render gradients and rounded corners.
That sounds great...
I added that to .htaccess but it still isn't working even after removing the PIE.htc link. On this page, the body should have a linear gradient and the text inputs should have rounded corners:
http://www.redkitecreative.com/projects/prsold/contact/...
I added that to .htaccess but it still isn't working even after removing the PIE.htc link. On this page, the body should have a linear gradient and the text inputs should have rounded corners:
http://www.redkitecreative.com/projects/prsold/contact/...
Works perfectly for me!
IE9 is not showing bg gradient because IE9 doesn't like gradients.
Refresh browser or clear browser cache or both.
Can't give a screen shot at the moment I use a MAC and test with crapIE.
IE9 is not showing bg gradient because IE9 doesn't like gradients.
Refresh browser or clear browser cache or both.
Can't give a screen shot at the moment I use a MAC and test with crapIE.
@55webdesign -- I respectfully disagree that "you don't need PIE anymore". PIE.htc is a good solution to cross-browser compatibility issues and works in every IE browser as long as javascript is enabled. Whereas chrome frame is a browser addon that a lot of people don't have, and a lot of people might not want to install in the first place.
So it is not drop-in replacement for something like PIE.htc... it's more of a "nice-to-have" thing that makes the browsing experience better for some people (probably a small percentage of people, although I'd be curious to see the numbers on this if any exist).
So it is not drop-in replacement for something like PIE.htc... it's more of a "nice-to-have" thing that makes the browsing experience better for some people (probably a small percentage of people, although I'd be curious to see the numbers on this if any exist).
Sorry to disagree, "disingenuous", excuse me,
I have not used PIE for a while, not only does it weigh over 40K, add bandwidth usage and clutter code, it is now unnecessary when using 'X-UA' in either your 'header.php' or in your .htaccess server file. Let alone having to add it to every bloody line of CSS to get the desired results.
With the so called 'Chrome frame', I have never had to 'install' this addon, it is not an addon, it just forces IE8 to behave and it works for me, I have two versions?
The only issue I have is with IE9 not rendering gradients, oh and images with rounded corners if I remember correctly.
So with 'X-UA' IE8 users get a pretty good rendering and IE9 users get a flat rendering, but then they'll never know the difference!
One more note from my point of view is that, the code you use for gradient is NOT how I code a gradient.
This is a typical background for me :
I do not worry about old 'good browsers' anymore either, they tend to get updated automatically.
If you want to see an example, try a couple of my sites and tell me what you see.
This is best for IE8, not IE9:
http://purple.55webdesign.co.uk/...
http://gold.55webdesign.co.uk/
I have not used PIE for a while, not only does it weigh over 40K, add bandwidth usage and clutter code, it is now unnecessary when using 'X-UA' in either your 'header.php' or in your .htaccess server file. Let alone having to add it to every bloody line of CSS to get the desired results.
With the so called 'Chrome frame', I have never had to 'install' this addon, it is not an addon, it just forces IE8 to behave and it works for me, I have two versions?
The only issue I have is with IE9 not rendering gradients, oh and images with rounded corners if I remember correctly.
So with 'X-UA' IE8 users get a pretty good rendering and IE9 users get a flat rendering, but then they'll never know the difference!
One more note from my point of view is that, the code you use for gradient is NOT how I code a gradient.
This is a typical background for me :
background:#ffe600;background:-webkit-linear-gradient(#fff067 40%, #ffe600 100%);background:linear-gradient(#fff067 40%, #ffe600 100%);
I do not worry about old 'good browsers' anymore either, they tend to get updated automatically.
If you want to see an example, try a couple of my sites and tell me what you see.
This is best for IE8, not IE9:
http://purple.55webdesign.co.uk/...
http://gold.55webdesign.co.uk/
I apologize for using that word -- I didn't mean to come off that harsh (I've since edited my comment to make it more cordial, as I should have done to begin with).
But I think you might be misunderstanding how Chrome Frame actually works. Putting the "X-UA-Compatible ... " line in your header does not automatically grant everyone who's using IE the chrome frame... it only tells browsers that already have the chrome frame plugin installed to use it. So while everything works great for you (because you have the chrome frame plugin installed), I would not assume that most IE users of your site are seeing it that way.
I agree that it makes life easier than using something like PIE.htc, but it doesn't actually accomplish what most people are looking for when they are concerned with IE8 compatibility.
Cheers,
Jordan
But I think you might be misunderstanding how Chrome Frame actually works. Putting the "X-UA-Compatible ... " line in your header does not automatically grant everyone who's using IE the chrome frame... it only tells browsers that already have the chrome frame plugin installed to use it. So while everything works great for you (because you have the chrome frame plugin installed), I would not assume that most IE users of your site are seeing it that way.
I agree that it makes life easier than using something like PIE.htc, but it doesn't actually accomplish what most people are looking for when they are concerned with IE8 compatibility.
Cheers,
Jordan
Certainly no offense taken, this is a debate!
I still stand by the fact using "X-UA" works for ALL the scenarios I have come across, I've had no feedback to the contrary.
I do not work with windows anymore (last machine Windows 98SE), I only test with IE8 and IE9 for now. I have a six year old 'Packard Bell' 'Celeron' (very noisy desktop) just getting by with Vista and a three year old 'Asus' something or other running Windows 7.
I have access to an XP (home) and XP (professional), all results are the same.
Strange thing is, we all spend time worrying about IE users, when they don't actually know what they're missing out on!
I have two client's that use XP Home, they surf, they run a B&B, they have a sh** website, but they're happy!
They are also in their seventies?
C'est la vie
I still stand by the fact using "X-UA" works for ALL the scenarios I have come across, I've had no feedback to the contrary.
I do not work with windows anymore (last machine Windows 98SE), I only test with IE8 and IE9 for now. I have a six year old 'Packard Bell' 'Celeron' (very noisy desktop) just getting by with Vista and a three year old 'Asus' something or other running Windows 7.
I have access to an XP (home) and XP (professional), all results are the same.
Strange thing is, we all spend time worrying about IE users, when they don't actually know what they're missing out on!
I have two client's that use XP Home, they surf, they run a B&B, they have a sh** website, but they're happy!
They are also in their seventies?
C'est la vie
I'm going to agree with Jordan here. I had a recent project in which I used PIE. To be sure, there were a lot of difficulties and issues (getting it loaded is just the first one), but it was necessary for the project.
I'll admit I didn't even consider chrome frame, but now that I look at it, I don't think I would. I didn't realize it required a plugin to be installed. I can't imagine a lot of people who are still using a 5 year old browser have installed the chrome frame plugin. (Oddly, despite it tweaking the user agent string, I couldn't find any percentage stats.)
I wish I didn't have to support older browsers. I wish clients didn't demand that the site looks the same, and has the same rounded corners, in IE7 and IE8 as it does in Chrome, but unfortunately that's what I (we) deal with. And chrome frame isn't a realistic solution for that, unless you can assume the users have/will install the add-on.
I'll admit I didn't even consider chrome frame, but now that I look at it, I don't think I would. I didn't realize it required a plugin to be installed. I can't imagine a lot of people who are still using a 5 year old browser have installed the chrome frame plugin. (Oddly, despite it tweaking the user agent string, I couldn't find any percentage stats.)
I wish I didn't have to support older browsers. I wish clients didn't demand that the site looks the same, and has the same rounded corners, in IE7 and IE8 as it does in Chrome, but unfortunately that's what I (we) deal with. And chrome frame isn't a realistic solution for that, unless you can assume the users have/will install the add-on.
URL's for "behavior" (as well as any url's you may have in MS filters) are relative to the PAGE being served, *not* relative to the stylesheet! This is different than image url()'s in your stylesheet, and is most likely the cause of your problems.
There are a few solutions to this. The simplest one is to hardcode the full path to your htc file. For example, if you have the PIE.htc file in your theme's directory, then you'd need this:
BUT this assumes your site is at the top-level of your domain. If it's not, then you need to take that into account in your path as well, like so:
I personally don't like having to hardcode the path to my themes though and will often put HTC files in my site's top-level "js" directory. Then the path for the "behavior" in your css is "/js/PIE.htc" (or "/my/site/path/js/PIE.htc").
If you don't want to have to hardcode paths, you could instead dynamically output the path from PHP. But you can't do that in CSS, so instead you move the behavior rules to the <head> of your html, then use <?php echo $this->getThemePath(); ?> to get the full path to your theme.
One more thing to note... I avoid using $this->getStyleSheet() in my themes, because I've experienced a lot of buggy behaviour with them... they choke on quotation marks, sometimes mess up your paths, etc. -- and they introduce a performance penalty as well. The only reason you should use them is if you have customizable CSS rules in your theme stylesheet.
So this might also be a cause of your problem (but it's probably the path issues I mentioned above).
-Jordan
There are a few solutions to this. The simplest one is to hardcode the full path to your htc file. For example, if you have the PIE.htc file in your theme's directory, then you'd need this:
behavior: url(/themes/mytheme/PIE.htc);
BUT this assumes your site is at the top-level of your domain. If it's not, then you need to take that into account in your path as well, like so:
behavior: url(/my/site/path/themes/mytheme/PIE.htc);
I personally don't like having to hardcode the path to my themes though and will often put HTC files in my site's top-level "js" directory. Then the path for the "behavior" in your css is "/js/PIE.htc" (or "/my/site/path/js/PIE.htc").
If you don't want to have to hardcode paths, you could instead dynamically output the path from PHP. But you can't do that in CSS, so instead you move the behavior rules to the <head> of your html, then use <?php echo $this->getThemePath(); ?> to get the full path to your theme.
One more thing to note... I avoid using $this->getStyleSheet() in my themes, because I've experienced a lot of buggy behaviour with them... they choke on quotation marks, sometimes mess up your paths, etc. -- and they introduce a performance penalty as well. The only reason you should use them is if you have customizable CSS rules in your theme stylesheet.
So this might also be a cause of your problem (but it's probably the path issues I mentioned above).
-Jordan
Also... the thing to note that screwed me up for a few hours is the content type. One version of IE (8, I think) is really picky. You need to add something to your htaccess file to specify the content type. The PIE FAQ discusses this.
You should be able to discern if the above is the problem, though. By looking at your developer toolbar (or whatever the IE equivalent is), you can see what's trying to be loaded. If you see a request for /about/locations/theme/htc/pie.htc which 404s, then you know that it's using an incorrect relative URL (see jordan's post). If you see that the htc file is being correctly loaded from the correct URL but doesn't seem to be working, then it's probably a content type issue.
You should be able to discern if the above is the problem, though. By looking at your developer toolbar (or whatever the IE equivalent is), you can see what's trying to be loaded. If you see a request for /about/locations/theme/htc/pie.htc which 404s, then you know that it's using an incorrect relative URL (see jordan's post). If you see that the htc file is being correctly loaded from the correct URL but doesn't seem to be working, then it's probably a content type issue.
Okay, I switched back from getStyleSheet to getThemePath, which is what I've used before. Then I moved PIE.htc into the root /js/ folder for the Concrete5 site and changed the links in the ie8.css to:
Still not working (this is IE8 I'm testing, using IE Tester). I tried putting PIE.htc in the root directory of the main site (which is what I use when developing WordPress sites) and changing to url(/PIE.htc), but no joy.
I also tried adding the content type in .htaccess:
AddType text/x-component .htc
Still nothing. Ack...
behavior: url(/js/PIE.htc);
Still not working (this is IE8 I'm testing, using IE Tester). I tried putting PIE.htc in the root directory of the main site (which is what I use when developing WordPress sites) and changing to url(/PIE.htc), but no joy.
I also tried adding the content type in .htaccess:
AddType text/x-component .htc
Still nothing. Ack...
Here's another way to approach it, with PIE.htc and PIE.php in your theme's directory, used like so in main.css (for *every* CSS selector that you want its capabilities):
Here's the PHP file that can also be compressed, and doesn't require an .htaccess change:
Maybe this might help you (or someone else),
John
behavior:url(PIE.php); /* no quotes */
Here's the PHP file that can also be compressed, and doesn't require an .htaccess change:
<?php /* PIE.php */ /* This file is a wrapper, for use in PHP environments, which serves PIE.htc using the correct content-type, so that IE will recognize it as a behavior. Simply specify the behavior property to fetch this .php file instead of the .htc directly: .myElement { [ ...css3 properties... ] behavior: url(PIE.php); } This is only necessary when the web server is not configured to serve .htc files with the text/x-component content-type, and cannot easily be configured to do so (as is the case with some shared hosting providers). This can also be helpful to use with PHP zlib compression :) */ header('Content-type: text/x-component');
Viewing 15 lines of 22 lines. View entire code block.
Maybe this might help you (or someone else),
John
This is great discussion.
I added jasteele123's PHP file to the site root, and switched the call to PIE in ie8.css to:
The site is now in a new location, I launched it just a while ago, but PIE's still not working in IE8 for me in IE Tester:
http://www.portablerentalsystems.com/...
This isn't imperative for this client - I can easily change the background color and call it good for IE7/8 - but I would really like to know how to implement PIE on Concrete5 for future reference.
I added jasteele123's PHP file to the site root, and switched the call to PIE in ie8.css to:
behavior:url(PIE.php);
The site is now in a new location, I launched it just a while ago, but PIE's still not working in IE8 for me in IE Tester:
http://www.portablerentalsystems.com/...
This isn't imperative for this client - I can easily change the background color and call it good for IE7/8 - but I would really like to know how to implement PIE on Concrete5 for future reference.
Just to add one more possibility to the mix... I have had trouble in the past with IETester. It does not always recreate IE accurately, especially when dealing with javascript (which is what the HTC file is).
I don't trust it anymore and instead use other solutions that are 100% faithful IE instances. For a while I was using Parallels or VMWare Fusion on my mac, with different virtual machines for different versions of Windows/IE. But that became a pain to manage, and now I use the excellent BrowserStack service (http://browserstack.com ). It is not free, but it is worth every penny in my opinion! Another service that does something similar ishttp://browserling.com (haven't used that one though so I can't vouch for it).
-Jordan
I don't trust it anymore and instead use other solutions that are 100% faithful IE instances. For a while I was using Parallels or VMWare Fusion on my mac, with different virtual machines for different versions of Windows/IE. But that became a pain to manage, and now I use the excellent BrowserStack service (http://browserstack.com ). It is not free, but it is worth every penny in my opinion! Another service that does something similar ishttp://browserling.com (haven't used that one though so I can't vouch for it).
-Jordan
Both files need to be in the same theme directory as your ie8.css
Also, I see nothing in your ie8.css file that actually uses any of PIE's features. It needs to be applied to *all* selectors needed.
Here's an example from one of my sites (in main.css):
Also, I see nothing in your ie8.css file that actually uses any of PIE's features. It needs to be applied to *all* selectors needed.
Here's an example from one of my sites (in main.css):
.searchBlockSearchField { padding:0 8px; width:190px; height:18px; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; behavior:url(PIE.php); /* needed here */ } .featured { background-color:#F6E9D4; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; box-shadow:3px 3px 6px #333; -webkit-box-shadow:3px 3px 6px #333; -moz-box-shadow:3px 3px 6px #333; behavior:url(PIE.php); /* also needed here */ }
This is the ie8.css file that's on the live site:
body, input.button, input.submit,
input[type="submit"], form.miniSurveyView input.submit,
input.button:hover, input.submit:hover, input[type="submit"]:hover,
form.miniSurveyView input.submit:hover, header#top .menu {
position: relative;
/*behavior: url(/PIE.htc);*/
behavior:url(PIE.php);
}
Maybe you were looking at a cached version...
I've put PIE.htc and PIE.php in the theme directory with ie8.css.
I also tried:
body, input.button, input.submit,
input[type="submit"], form.miniSurveyView input.submit,
input.button:hover, input.submit:hover, input[type="submit"]:hover,
form.miniSurveyView input.submit:hover, header#top .menu {
position: relative;
behavior: url(PIE.htc);
/* behavior:url(PIE.php); */
}
Still not working for me in IE Tester but I'll find another method for checking and report back.
body, input.button, input.submit,
input[type="submit"], form.miniSurveyView input.submit,
input.button:hover, input.submit:hover, input[type="submit"]:hover,
form.miniSurveyView input.submit:hover, header#top .menu {
position: relative;
/*behavior: url(/PIE.htc);*/
behavior:url(PIE.php);
}
Maybe you were looking at a cached version...
I've put PIE.htc and PIE.php in the theme directory with ie8.css.
I also tried:
body, input.button, input.submit,
input[type="submit"], form.miniSurveyView input.submit,
input.button:hover, input.submit:hover, input[type="submit"]:hover,
form.miniSurveyView input.submit:hover, header#top .menu {
position: relative;
behavior: url(PIE.htc);
/* behavior:url(PIE.php); */
}
Still not working for me in IE Tester but I'll find another method for checking and report back.
Again, you have no shading, radius or gradients that PIE addresses.
Just adding it to a stylesheet like yours above does nothing...
BTW, attached is what your site looks like in my IE8 at 1024x768
Just adding it to a stylesheet like yours above does nothing...
BTW, attached is what your site looks like in my IE8 at 1024x768
I'm not sure what you're talking about, sorry... I'm loading ie8.css using conditional comments in header.php. For example, input.button has a border-radius in my main stylesheet:
input.button {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.3);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.3);
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
In IE8, input.button also gets position: relative and PIE behavior applied.
Can you explain what you mean?
input.button {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.3);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.3);
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
In IE8, input.button also gets position: relative and PIE behavior applied.
Can you explain what you mean?
I've never tried to use it the way you are, but like my *working* examples above, you need to put this in each selector in your main.css
behavior: is ignored by all browsers except IE as far as I remember.
behavior:url(PIE.php);
behavior: is ignored by all browsers except IE as far as I remember.
I'll come back to this Wednesday and add the selector to a few elements in the main stylesheet as you've suggested and test again.
I've used the method I mentioned above (PIE only used in a conditional IE stylesheet) for more than 55 WordPress sites and a few HTML ones with no issues. I hope your suggestion works for me here.
I've used the method I mentioned above (PIE only used in a conditional IE stylesheet) for more than 55 WordPress sites and a few HTML ones with no issues. I hope your suggestion works for me here.
Sorry, I didn't mean to be rude at all in my last response and I definitely appreciate the input, I'm just not understanding what you're saying about having no shading or radius that PIE affects in ie8.css... I'll have to check my files and links again Wednesday as I'm sure I've screwed up something simple.
Re: the screenshot you sent - if you increase the size of the desktop to 1280x1024, you'll see the full desktop version which I've attached. In BrowserStack PIE isn't being applied to the main menu background - see attached file.
The yellowish menu background should have a gradient applied per ie8.css. From main stylesheet:
header#top .menu {
background: #c6bf6f;
background: -moz-linear-gradient(top, #c6bf6f 1%, #9e9957 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#c6bf6f), color-stop(100%,#9e9957)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c6bf6f 1%,#9e9957 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c6bf6f 1%,#9e9957 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c6bf6f 1%,#9e9957 100%); /* IE10+ */
background: linear-gradient(to bottom, #c6bf6f 1%,#9e9957 100%); /* W3C */
}
Re: the screenshot you sent - if you increase the size of the desktop to 1280x1024, you'll see the full desktop version which I've attached. In BrowserStack PIE isn't being applied to the main menu background - see attached file.
The yellowish menu background should have a gradient applied per ie8.css. From main stylesheet:
header#top .menu {
background: #c6bf6f;
background: -moz-linear-gradient(top, #c6bf6f 1%, #9e9957 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#c6bf6f), color-stop(100%,#9e9957)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c6bf6f 1%,#9e9957 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c6bf6f 1%,#9e9957 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c6bf6f 1%,#9e9957 100%); /* IE10+ */
background: linear-gradient(to bottom, #c6bf6f 1%,#9e9957 100%); /* W3C */
}
No worries.
PIE has no way of knowing what declarations you have in any external stylesheet. That's why the behavior:url(PIE.php); *has to be* in *every* selector where you want it applied.
Of course you could repeat the whole thing again in ie8.css, but that just adds bloat and repetitiveness and two places to change things in the future.
There is no "cascading" PIE so to speak.
I've never tried to use it with background: but I guess you would add this at the end of that declaration above:
header#top .menu {
/* ... */
background: behavior:url(PIE.php);
}
My picture was just to show you what the menu looks like on a stock IE8 at 1024x768 (window size not desktop size).
PIE has no way of knowing what declarations you have in any external stylesheet. That's why the behavior:url(PIE.php); *has to be* in *every* selector where you want it applied.
Of course you could repeat the whole thing again in ie8.css, but that just adds bloat and repetitiveness and two places to change things in the future.
There is no "cascading" PIE so to speak.
I've never tried to use it with background: but I guess you would add this at the end of that declaration above:
header#top .menu {
/* ... */
background: behavior:url(PIE.php);
}
My picture was just to show you what the menu looks like on a stock IE8 at 1024x768 (window size not desktop size).
Actually, that's not how it works in WordPress (which may be totally different - *and* you're referring to PIE.php, I use PIE.htc in almost all cases and maybe that's the difference here - is it?).
I call ie8.css and other IE stylesheets conditionally using this method that I wrote up:
http://www.position-relative.com/2012/wordpress/using-css3pie-in-wo...
Then the contents of a typical ie8.css file might look like this:
input.button, input#submit, input.button:hover, input#submit:hover,
fieldset, #tagline, #phone-line, #header #searchbox .search-form input.search-text, #header #searchbox .search-form input.button, #primary-menu ul li,.entry-meta, .triangle-isosceles, .pullquote-img, .pullquote,.coupon {
position: relative;
behavior: url(/PIE.htc);
}
PIE affects the radius, gradient, shadow properties from the main screen.css file with no problem whatsoever. You can see this site here and see PIE working fine in IE8 on these coupons:
http://www.acechemdryco.com/
I call ie8.css and other IE stylesheets conditionally using this method that I wrote up:
http://www.position-relative.com/2012/wordpress/using-css3pie-in-wo...
Then the contents of a typical ie8.css file might look like this:
input.button, input#submit, input.button:hover, input#submit:hover,
fieldset, #tagline, #phone-line, #header #searchbox .search-form input.search-text, #header #searchbox .search-form input.button, #primary-menu ul li,.entry-meta, .triangle-isosceles, .pullquote-img, .pullquote,.coupon {
position: relative;
behavior: url(/PIE.htc);
}
PIE affects the radius, gradient, shadow properties from the main screen.css file with no problem whatsoever. You can see this site here and see PIE working fine in IE8 on these coupons:
http://www.acechemdryco.com/
The PIE.php just sets the content type (and can be compressed) so it really shouldn't make a difference.
The PIE.htc file is being loaded with the correct
Content-Type: text/x-component:
http://www.webpagetest.org/result/130206_RG_4DE/1/details/#request2...
So I'm not sure why it shouldn't be working. On my site it is loaded quite earlier, so maybe it's some kind of side effect. PIE can be quite picky, might try a Google search for PIE htc not working.
Just to show it's not just me, this is probably not what you want the menu to look like :)
http://www.webpagetest.org/result/130206_RG_4DE/1/screen_shot/...
Attached is a 1024x768 FF window screenshot.
Good luck and please let us know if you get it resolved.
The PIE.htc file is being loaded with the correct
Content-Type: text/x-component:
http://www.webpagetest.org/result/130206_RG_4DE/1/details/#request2...
So I'm not sure why it shouldn't be working. On my site it is loaded quite earlier, so maybe it's some kind of side effect. PIE can be quite picky, might try a Google search for PIE htc not working.
Just to show it's not just me, this is probably not what you want the menu to look like :)
http://www.webpagetest.org/result/130206_RG_4DE/1/screen_shot/...
Attached is a 1024x768 FF window screenshot.
Good luck and please let us know if you get it resolved.
1024x768 window is not big enough for the desktop version. At 1280x1024 in Browsercam you'll see the full width site.
I got this working after some testing this morning, starting with jasteele123's suggestion to put the PIE behavior back in the main CSS file. From there, once it was working, I moved it back to the conditional CSS file and this is how I have it set up now.
In header.php:
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="<?php echo $this->getThemePath()?>/ie8.css" />
<![endif]-->
In screen.css, there are no calls to PIE at all.
In ie8.css I added just the form text inputs and textarea and submit button that are on the Contact page to test rounded corners.
form.miniSurveyView input[type="text"],
form.miniSurveyView textarea, input.button, input.submit,
input[type="submit"], input.button:hover,
input.submit:hover, input[type="submit"]:hover {
behavior: url(/PIE.htc);
}
You can see this working in Browsercam in IE8 (also in IE Tester) on the Contact page - just the rounded corners on the inputs and textarea and the button (shot attached). So it seems that it works if PIE's in the root of the site, but it wasn't working for me with PIE in the theme file. I don't really care, I'm just glad it's working now.
I really appreciate all the discussion, very helpful! Thank you!
I got this working after some testing this morning, starting with jasteele123's suggestion to put the PIE behavior back in the main CSS file. From there, once it was working, I moved it back to the conditional CSS file and this is how I have it set up now.
In header.php:
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="<?php echo $this->getThemePath()?>/ie8.css" />
<![endif]-->
In screen.css, there are no calls to PIE at all.
In ie8.css I added just the form text inputs and textarea and submit button that are on the Contact page to test rounded corners.
form.miniSurveyView input[type="text"],
form.miniSurveyView textarea, input.button, input.submit,
input[type="submit"], input.button:hover,
input.submit:hover, input[type="submit"]:hover {
behavior: url(/PIE.htc);
}
You can see this working in Browsercam in IE8 (also in IE Tester) on the Contact page - just the rounded corners on the inputs and textarea and the button (shot attached). So it seems that it works if PIE's in the root of the site, but it wasn't working for me with PIE in the theme file. I don't really care, I'm just glad it's working now.
I really appreciate all the discussion, very helpful! Thank you!
You can add it in the following way:
http://basicuse.net/articles/pl/textile/html_css/css3_progressive_i...
It's quite simple, but there can be some difficulties:
1. Access to PIE.htc file
2. MIME-type which is set in header - this one very important for IE.
http://basicuse.net/articles/pl/textile/html_css/css3_progressive_i...
It's quite simple, but there can be some difficulties:
1. Access to PIE.htc file
2. MIME-type which is set in header - this one very important for IE.
