What could be the reason for CSS3 PIE failing to work on sub pages when an absolute path is used in the CSS file?

I am struggling with CSS styling and have created the following class:

a.greenbutton, input.greenbutton  {
    /*background: url("../image/button.png") repeat-x scroll left top transparent;*/
    behavior: url("/css3pie/PIE.php");
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px 7px 7px 7px; 
    cursor: pointer;
    display: inline-block;
    line-height: 11px;
    padding: 6px 12px;
    text-decoration: none;
    background-color: green;
    color: white;
    position:relative;
    z-index: 0;     
}

The PIE.php file that I am using is stored in the /root/css3pie/ directory.

If you want to see the styling in action, visit:

For a comparison, check out:

If you wish to access the PIE.php file directly, you can download it from:

I am facing some issues with my styling, can anyone help me identify what I am doing wrong?

Answer №1

It appears that you are utilizing a relative path rather than an absolute path. In order to assist you effectively, I require information regarding the location of your CSS file in relation to the root folder.

For instance, if the path is something like root/styles/, then your pie rule should include two dots (..) before the /csspie reference.

In essence, instead of:

behavior: url("/css3pie/PIE.php");

You should use:

behavior: url("../css3pie/PIE.php");

However, this is merely speculation until I ascertain the precise location of your CSS file/folder.

Please refer to the following page for additional information:

The behavior URL

IE interprets the URL for the behavior property relative to the source HTML document, rather than relative to the CSS file like every other CSS property. This makes invoking the PIE behavior inconvenient, because the URL has to either be:

Absolute from the domain root — this makes the CSS not easily moveable between directories — or, Relative to the HTML document — this makes the CSS not easily reusable between different HTML files. URLs in PIE-interpreted CSS properties

PIE does not parse the CSS stylesheets (to do so would be unacceptably slow); it lets IE handle the parsing, selector querying, cascading, etc. and then simply asks it for the resulting property values. This means that when PIE gets a property value, it has no knowledge of the context from which that value originated.

As a result, for properties which contain URL values (such as border-image or -pie-background), PIE cannot resolve those URLs relative to the CSS file in which they appear. It resolves them instead relative to the JavaScript execution context, which is the location of the source HTML document.

Best regards
G

UPDATE:

Ensure you have systematically tested the following options:

  1. behavior: url("../css3pie/PIE.php");
  2. behavior: url("/../css3pie/PIE.php");
  3. behavior: url("http://trashtalk.dk/css3pie/PIE.php");

Also, where is the css3 pie rule in your CSS? I cannot see it, such as -pie-background or similar.

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

Bypassing CORS/CORB restrictions in a React app without the need for a NodeJS/Express server

Encountering an issue while trying to launch an app on Heroku that fetches a response from Okta, as I am getting a CORB error The Cross-Origin Read Blocking (CORB) has blocked the cross-origin response from with MIME type application/json. Is there a wa ...

Adding CSS properties to an image within the ImageResourceCell of a CellTable

After creating a CellTable with an image column in GWT using ImageResource, I encountered a problem. I needed to change some CSS properties of the image such as size or adding 'cursor="pointer" for a click event, but was unsure how to do so. When insp ...

Developing an interactive single-page website

My goal is to develop a PHP web application with an overlay container that features dynamic fields/forms. The idea is for users to fill out the form without being redirected from the main page they are on. Imagine being able to report a page error on a w ...

Display information upon the clicking of a button and update the color of the selected button

When a button is pressed, I want to display content and change the color of the active button. Currently, I can do each operation individually, but I'm struggling to merge these functionalities. This is how my script looks like for displaying the con ...

A step-by-step guide to triggering a click event using CSS

This code snippet is working as expected: .rightone ul { list-style: none; padding: 0px; margin: 0px; } .rightone ul li { display: block; position: relative; float:right; } .rightone li ul { display: none; } .rightone ul li a ...

Is there a way to customize the look of the time selected in the <input matInput type="time" step="1" /> time picker?

Currently, I am utilizing the following code as a time picker in my Angular 9 application. My goal is to modify the selected time's color to a bright blue shade. How can I accomplish this task? <input matInput type="time" step="1&quo ...

What is the best way to retrieve the initial <ul> element from a JavaScript document?

Just to clarify, I'm looking to target a specific div with a class and the first <ul> from a document (specifically in blogger). Currently, I have a JavaScript function that grabs the first image and generates a thumbnail as shown below: //< ...

What about a Material UI-inspired homepage design?

Looking at the demo image on the main page for Material UI has me really impressed. I am interested in using a similar theme with MUI for my web application. Can you advise me on how I can achieve this look, or do I have to start from scratch? https://i.s ...

Establishing the size of the <img> alternative for <source> within <picture> to enhance SEO and optimize page loading speed

In the following code snippet, I am aiming to achieve the following: Allowing the browser to choose between WEBP <source> and JPEG in<img> (as a fallback). Displaying the image at 754px width for viewport widths greater than 1058px. For small ...

Placing two images next to each other with accompanying captions

Currently working on developing a webpage, I am aiming to have two images in each row with captions positioned beneath them. The images are already configured as follows, I just require the captions: <div class = "container"> <img class = "pi ...

"Exploring the world of jQuery and the array data structure

I'm attempting to target and access all inputs with the specified class: validate['number'] However, in some cases, the classes may appear as follows: validate['required', 'number'] My goal is to identify all elements ...

JavaScript still mentions a class that no longer exists

One of my elements has a class of .collapsed. When this element is clicked, a jQuery function is triggered to remove the .collapsed class and add the .expanded class instead. Even after the .collapsed class is removed, the function I have created continue ...

Android tablet (Nexus) optimized for full-height website viewing

I have been attempting to retrieve the Nexus tablet's height by using $(window).height();, but I am encountering difficulties because it seems to include the height of the URL bar in the result, which disappears when the user scrolls. My webpage is d ...

What is the best way to utilize Content-Disposition: attachment?

I am new to creating websites and I am trying to make it easier for users to download mp3's from my site by allowing them to left click instead of the traditional right click and save as method. In order to achieve this, I need to set the Content-Disp ...

Tips for managing mouseover events on a row within an HTML table

My HTML code includes a table like the following: <table> <tr class="myClass"> <td>John</td> <td>Smith</td> </tr> </table> I am trying to change the font color, background color, and use a poi ...

Searching for various values in PHP with user input

I am currently working on implementing a basic search tool that allows users to search the database by providing certain inputs. The form consists of 3 input fields: However, when I attempt to search one by one, only the first field functions correctly w ...

Tips for rendering objects in webgl without blending when transparency is enabled

My goal is to display two objects using two separate gl.drawArrays calls. I want any transparent parts of the objects to not be visible. Additionally, I want one object to appear on top of the other so that the first drawn object is hidden where it overlap ...

Creating an undo feature for a dynamically generated checklist of checkboxes

I am using a combination of javascript/jquery and html to dynamically populate the page with checkboxes. When you click "add", a new checkbox is created. I am now looking for a way to add an undo button that would delete the last checkbox created. Here is ...

jQuery unable to target Bootstrap button

I've been experiencing some trouble trying to attach a listener to a button I made with Bootstrap. <button type="button" id="buttonone" class="btn btn-default btn-lg good"> <span class="glyphicon glyphicon-minus" aria-hidden="true">< ...

What is the reason behind the success of 'as' in ngFor compared to '='?

<tr *ngFor = "let item of list; let i = index;"> An issue arises with the code above: The error message reads: Type 'number' is not assignable to type 'string'. td [ngModelGroup]="j" #temp="ngModelGroup ...