Search code examples
csstwitter-bootstrapcss3piehtml5shiv

CSS3 + HTML5SHIV + CSS3PIE Border-radius NOT working on IE8 but working on IE7,9,10

the site I'm working with - http://www.quickseorankings.com/dev/, its built with:

  • Twitter Bootstrap
  • HTML5 + CSS3
  • HTML5SHIV
  • CSS3PIE

Issue: Border-radius at navbar link(active) NOT working on IE8 even with CSS3PIE. But its working on IE7,9,10 (using browserstack for testing)

CSS Location: /css/
CSS3PIE HTC File Location: /root/ same location as my index.html

HTC Coded as: behavior: url(PIE.htc);

Fix Attempt #1: behavior: url(/PIE.htc); and behavior: url(../PIE.htc);
even tried using the php one - behavior: url(PIE.php); behavior: url(/PIE.php);

Fix Attempt #2Added Htaccess: AddType text/x-component .htc

Fix Attempt #3 used: http://fetchak.com/ie-css3/ - its actually a an HTC solutions but different approach vs CSS3PIE. Still didn't work..

Fix Attempt #4 Added: -pie-border-radius: 10px; not working.

Fix Attempt #5 Added: position:relative !important; zoom:1; z-index:0 !important nothing...

Followed other fix on this forum, still didn't work.. Greatly appreciate your help!

Fix Suggestion by ScottSimpson: Isolation test, with plain html with no TBS, here-s the page test - http://www.quickseorankings.com/pie/ the ones on the top button is CSS3PIE (DIDN'T WORK).. The bottom part button from fetchak ie-css.htc is quite working.. Now, this lead us near to my problem.. Question is, is TBS causing .htc not to load properly? or TBS is overwriting it? but I did, !important with the values..hmmmm..

WINNER IS pjumble : I'm using PIE.htc (PIE 2.0 beta 1) so it needs to have this file - PIE_IE678.js then everything's working... Thank you so much pjumble!

Solution

  • You're using PIE 2.0 beta, the .htc file for PIE 2.0 simply loads an external javascript file PIE_IE678.js. You need to upload PIE_IE678.js to your server and then inform PIE where the javascript file is located.

    The easiest way is to add the PIE_IE678.js file to the same directory as PIE.htc and then use the absolute URL to the PIE.htc file in your css file, e.g:

    behavior: url('http://www.quickseorankings.com/dev/PIE.htc');

    and your directory structure would need to be:

    quickseorankings.com/
   dev/
      PIE.htc
      PIE_IE678.js

    Note: Don't manually load any of the PIE .js files, the .htc file loads the additional javascript files for you.