IE8 is giving me a tough time with CSS3 + HTML5SHIV + CSS3PIE Border-radius; it works fine on IE7, 9, and

Working on a site at , which is constructed using:

  • Twitter Bootstrap
  • HTML5 + CSS3
  • HTML5SHIV
  • CSS3PIE

Problem: Border-radius styling for the navbar link when active is not functioning in IE8 despite using CSS3PIE. However, it works fine in IE7,9,10 (confirmed through browserstack testing)

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

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

Solution Attempt #1: Tried behavior: url(/PIE.htc); and behavior: url(../PIE.htc);
even experimented with the php approach - behavior: url(PIE.php); behavior: url(/PIE.php);

Solution Attempt #2: Applied Htaccess rule: AddType text/x-component .htc

Solution Attempt #3: tested out: http://fetchak.com/ie-css3/ - an alternative HTC solution but still no luck..

Solution Attempt #4: Added: -pie-border-radius: 10px; without success.

Solution Attempt #5: Tried adding: 

position:relative !important; zoom:1; z-index:0 !important
no changes...
Despite trying various solutions from this forum, the issue persists.. Any assistance is greatly appreciated!

Suggested Fix by ScottSimpson: Conducted isolation test, created a plain html page without TBS, here is the test page - 

http://www.quickseorankings.com/pie/
the buttons on top are implemented with CSS3PIE (no success).. The button below utilizing fetchak ie-css.htc has shown some progress.. This brings us closer to identifying the problem.. Could it be that TBS is interfering with the loading of .htc files or being overridden by TBS? I have already used !important with the values..hmmmm..

VICTORY GOES TO pjumble : Using PIE.htc (PIE 2.0 beta 1), I needed to include this file - PIE_IE678.js then everything worked perfectly... Thank you so much pjumble!

csstwitter-bootstrapcss3piehtml5shiv

Answer №1

If you're using the BETA version of PIE 2.0, the .htc file for PIE 2.0 actually just loads an external javascript file called PIE_IE678.js. To make it work, you'll need to upload the PIE_IE678.js file to your server and then let PIE know where it is located.

The simplest way to do this is by placing the PIE_IE678.js file in the same directory as PIE.htc, and then use the absolute URL of the PIE.htc file in your css file, like so:

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

Your directory structure should look something like this:

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

Remember: Do not manually load any of the PIE .js files, as the .htc file will take care of loading the additional javascript files for you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using JavaScript to show a prompt message inside an h1 tag within a newly created div

I have developed a basic JavaScript program that opens a prompt dialog when the div tag is clicked, allowing the user to enter text. The program then creates a new div element and displays the entered text above it. However, I am facing an issue where I wa ...

javascriptcss

Customize the border style for the span element

I attempted to use the code below in JavaScript/jQuery to adjust the border thickness. Unfortunately, it seems to be ineffective. Can someone please assist me? //$("span").css({"border":"4px solid green"}); document.getElementById("192.168.42.151:8984_ ...

javascriptjqueryhtmlcss

Utilizing cookies to track the read status of articles - markers for reference

Currently, I am in the process of developing a website and am interested in implementing a feature that allows users to track which articles they have read. I am considering adding a small circle next to each article heading to signify whether it has been ...

javascriptcsscookies

How can I integrate checkboxes in a list view with jQuery Mobile?

How can I display the status of users with three different levels in a list view? I need to show whether they are attending or not, similar to the image provided. The issue is that currently the checkbox appears below the name, but I want it to be at the r ...

htmlcssjquery-uijquery-mobile

How do I incorporate pagination into a PL-SQL dynamic content table in Oracle Apex?

I've successfully created a PL-SQL dynamic content report in Oracle Apex, but I'm struggling with implementing pagination. With too many rows to display at once, adding pagination will greatly enhance the user experience. Here is a snippet of my ...

javascripthtmlcssplsqloracle-apex

What steps can I take to fix the Error with webpack's style hot loader JavaScript?

Just starting out with native script and encountered an issue when running this code: <template> <view class="container"> <text class="text-color-primary">My Vue Native Apps</text> </view> </template> &l ...

javascriptcssvue.jsnativescriptnativescript-vue

The CSS syntax definition for list styles

Inside the body of my site is this code: Here is the HTML: <ul id="navlist"> <li class="first"> <a href="/" id="current">Home</a> </li> <li> <a href="/Store/">Store</a> </ ...

htmlcsssyntax

Adjust the dimensions of the dropdown menu

Objective: How can I adjust the width of a select dropdownlist that is utilizing bootstrap v2? Challenge: I am uncertain about how to modify the width in the context of bootstrap. Additional Information: Keep in mind that there are three dropdownli ...

javascriptjqueryhtmlcsstwitter-bootstrap

HTML unique flex wrapping

https://i.sstatic.net/ekVr4.png #menu { display: flex; justify-content: space-evenly; align-items: center; margin: 0 5px 0 5px; height: 30px; flex-wrap: wrap; } .menu_item { margin: 0 10px 0 10px; } .menu_item2 { margin: 0 10px 0 10px; } <div id="m ...

htmlcssflexbox

Changing the Div Class in Master page from a Child page is a straightforward process that involves modifying

I am trying to dynamically change the style of a div element in the master page from my child page. This is the code I am using: protected void ShowMsgText(int MsgID) { HtmlGenericControl MsgInner; MsgInner = ((HtmlGenericControl) ...

asp.netcssmaster-pages

jQuery code unable to alter the class of a div

Need help with a script on my single page site that adds a "read more" style link to a content area's div. The goal is for the button to change the class of the content area when clicked, showing all of the content. Clicking again should hide the cont ...

javascriptjqueryhtmlcss

Issue with navigating previous and next slides in Bootstrap carousel

I'm currently facing an issue where when I try to navigate left/right through pictures on my page, it ends up moving slightly downwards instead. Despite following a tutorial to resolve this problem, there seems to be a missing piece of code that I can ...

htmlcssbootstrap-5

New design in TinyMCE V5: Vertical toolbar labels arranged within a CSS grid layout

When TinyMCE version 5 is placed inside a CSS grid layout, the toolbar labels are displaying vertically. It appears that the "width:auto" property is not being applied correctly, and I am struggling to find a solution to fix it. I would greatly appreciat ...

csstinymce

A possible substitute for the "background-size" CSS attribute

After struggling for days without success, I find myself once again seeking your help. The current issue revolves around the slideshow on THIS website, which is powered by the jQuery Infinite Carousel Plugin. Despite adding background-size: auto 100%; to ...

jquerypluginsslidercarouselcss

Leveraging em units in jQuery Script

I'm currently in the process of building a website and I'm facing an issue with converting measurements to em's. The script that I have reused from a previous project only seems to work with pixels, despite my efforts to make it compatible w ...

javascriptjqueryhtmlcss

Show image at 100 pixels wide after removing float classes (float-sm-start / float-sm-end) in Bootstrap 5 at a breakpoint

I am in the process of updating my HTML files to Bootstrap version 5.2.3. In the current version (4.6.2), I have been utilizing the float classes left and right to position images with text wrapped around them on their respective sides. Additionally, I ha ...

csscss-floatbootstrap-5figure

Tips on incorporating background color into HTML emails dispatched via PHP mail()

Struggling to add a background color to my HTML email. I've attempted various methods: Inserting <script> tags with CSS code inside Adding bgcolor in body tags Using a CSS style sheet All to no avail. I suspect it could be the email provi ...

phphtmlcsshtml-emailemail

What is the best way to arrange elements above and below each other in a single flexbox container?

Currently, I am facing a challenge aligning the number 238,741 and the letter N in Number. There is a padding between the Prize Pool div and the Number Active div. All of these elements are enclosed within a parent container with display set to flex and fl ...

cssstyled-components

ImageMapster for perfect alignment

I'm struggling with centering a div that contains an image using imagemapster. When I remove the JS code, the div centers perfectly fine, indicating that the issue lies with the image mapster implementation. It's a simple setup: <div class=" ...

javascriptjqueryhtmlcss

When a child SPAN surpasses the height of the parent TD/TABLE, trim it down

I am attempting to make my outer table/td clip the inner SPAN when the content of the span exceeds the height of the outer table, all while maintaining vertical and center alignment. Instead of the current layout: https://i.sstatic.net/s33q7.png I want ...

htmlcss