4

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!

bootstrapper
  • 43
  • 1
  • 6
  • Welcome to Stack Overflow! This is far from my area of expertise, but hopefully others will be able to help. What was the fix you tried that didn't work? – jerry May 18 '13 at 14:29
  • Thank you Jerry. I tried absolute path url for the htc location quote and without quote. Tried (/PIE.htc) an (PIE.htc).. I also tried (PIE.php) still the same..tried placing the htc and pie.php in my /pie/ folder, didn't work.. I know there's a different solution/workaround for border-radius in ie8 like the jquery corner js, but I want to solve this first.. – bootstrapper May 18 '13 at 15:55
  • Try creating a new html page without TBS, and with only a rounded corner element. That way you can see if TBS is causing the issue with PIE. IMO - PIE is more trouble than it is worth. – Scott Simpson May 18 '13 at 20:21
  • With the PIE 2.0 beta you need PIE_IE678.js on your server, and you need to tell PIE where it is either by adding a pie-load-path attribute to the html element, or using an absolute URL in your stylesheet to the HTC file [(see source)](https://github.com/lojjic/PIE/blob/master/sources/htc_script.js#L37). Alternatively stick to using the PIE 1.0 stable which works without external javascript files. – pjumble May 18 '13 at 20:55
  • @ScottSimpson thanks. The isolation process lead us to the answer - here's the test http://www.quickseorankings.com/pie/ . CSS3PIE didn't work at all. However, fetchak ie-css.htc working 100%. Question is, why fetchak didn't work with TBS? – bootstrapper May 18 '13 at 21:19
  • @pjumble I will just call PIE_1E678.js in my script tag and that's it right? or this pie-load-path <-- can you cite some example? is this absolute path of my .htc? Elaborate pls. thanks btw.. – bootstrapper May 18 '13 at 21:26
  • @pjumble tried your suggestion on quickseorankings.com/pie/ didn't work.. All I did was download that htc_script.js and call it `` didn't work. However, I'm confused with the pie-load-path.. do I need to fill in the absolute url path of my PIE.htc here? – bootstrapper May 18 '13 at 21:34

1 Answers1

3

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.

pjumble
  • 16,880
  • 6
  • 43
  • 51
  • Followed the above answer and updated the /dev/ this is the error it gets: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Tablet PC 2.0; .NET4.0C; .NET4.0E) Timestamp: Sat, 18 May 2013 21:44:53 UTC Message: 'element' is undefined Line: 1 Char: 1 Code: 0 URI: http://www.quickseorankings.com/dev/htc_script.js – bootstrapper May 18 '13 at 21:48
  • You're uploading the wrong file (I only linked that file in the comment to show how PIE tries to locate the javascript). Go to http://css3pie.com/download/, download PIE 2.0 beta 1, unzip, upload `PIE.htc` and `PIE_IE678.js` to your `dev` folder, then in your `ie8.css` file load the htc using the behavior listed above (using the absolute URL). Don't manually include any extra files. – pjumble May 18 '13 at 21:51
  • I'm not sure if I can add quite similar question here. CSS3PIE says they support box-shadow, how will we code it in pie? tried -pie-box-shadow: inset 0px 3px 3px #999; didn't work, tried rgba mode, didn't work.. have you @pjumble successfully rendered inset shadow with pie? – bootstrapper May 18 '13 at 22:17
  • @bootstrapper unfortunately PIE doesn't support `inset` with `box-shadow` - see: https://github.com/lojjic/PIE/issues/3 – pjumble May 18 '13 at 22:38