border-image’s url() requires the reference to be relative to the document

[evadne]

PIE seems to require that the url() used in border-image to be a reference relative to the document, instead of relative to the stylesheet. Under some extreme use cases (e.g. a site that works with mod_rewrite), this would require a wrapper script around the stylesheet served that modifies the path according to the document’s URL.

Since PIE works with border-image instead of -pie-border-image, this will soon break other browsers.

It would be great if PIE supports referencing the image relative to the stylesheet.

[lojjic]

I agree this would be great. The same issue also occurs in -pie-background image URLs. The problem is that PIE has no idea what stylesheet its element's styles come from, so it can't use the stylesheet as the base URL. Unfortunately I can't think of a clean way to get around this which doesn't involve full parsing of all the stylesheets (that would be detrimental to performance).

I'm all ears if anyone has any ideas how to do this.

[evadne]

I finish the wrapper using something like: url:(#REWRITE#/image.png); so the wrapper script locates the strings and replaces them. If we introduce one more property called -pie-document-root it might work:

body { -pie-document-root: '/site/style.css" }

Which means that all url() references, if need to be translated to references relative to the document, would be transformed on the premise that they were referenced relative to this base URL if they are not absolute URLs.

Alternatively if there is only one stylesheet, PIE would automatically set the base URL to that stylesheet.

This seems quite dirty, though, and I guess a similar mechanism is already provided by IE somehow. If we can somehow touch the CSS rule’s parent stylesheet object (DOM StyleSheet Object), and it works with custom CSS attributes, then its href could be of good use.

[raeldc]

Hi Jason and Evadne,

I'm looking forward to the resolution of this issue as this is what's preventing PIE to be usable on a CMS. If PIE is included in a CMS theme, the location of PIE.htc could be anywhere. If we can't use relative URLs, then our only alternative is to use absolute paths. like

-pie-background: url(/themes/mytheme/images/myimg.png); 
behavior: url(/themes/mytheme/PIE.HTC);

but what would happen if the system is in a subdirectory or is using SEF urls? Of course it's gonna be using the wrong path. Absolute URLs isn't a solution.

The only solution I can think of is to set the base URL of PIE through a Javascript declaration. Something like this in the theme's main dynamic file:

<script type="text/javascript">
PIE.options{base_url:'http://example.com/themes/mytheme'}
</script>

This way, a CMS theme won't have a problem passing variable settings to PIE. It can be included in the main theme file which is generated dynamically e.g. in PHP. Putting the settings inside the CSS like body { -pie-document-root: '/site/style.css" } is still a problem since CSS are static files and it would be impractical to generate a CSS file dynamically.

I hope you get my drift. Thanks! Looking forward to your comments :)

[evadne]

Agreed that assigning the base URL using JS is a good solution.