Search code examples
cssinternet-explorer-8internet-explorer-7css3pie

CSS3 PIE - behavior HTC file doesn't load when site is accessed without trailing backslash


When I access a site that uses CSS3 PIE in two different ways, the HTC file isn't found in one case. I'm using sample domain and path names to illustrate the issue below. What could be causing this to happen?

http://sampledomain.com/site <-- doesn't render rounded corners in IE8

http://sampledomain.com/site/ <-- renders rounded corners

CSS rounded corner file located at

http://sampledomain.com/site/content/css/pie.htc

The site is including the CSS file from

http://cdn.cdndomain.com/path/to/content/css/rounded-corners.css

The CSS:

.rounded-corners
{
    behavior: url(content/css/pie.htc);
}

Solution

  • Despite your comments elsewhere on this question, this isn't actually a bug in IE; it's handling the relative path perfectly rationally.

    The reason this issue happens is because the two URLs (ie with and without the slash) are actually in different directories as far as the URL path is concerned.

    • http://sampledomain.com/site -- this is treated as if site is a filename in the root directory.

    • http://sampledomain.com/site/ -- this is treated as if site is a directory in the root, and you're loading the default file in that directory.

    So as far as the browser is concerned, the two URLs are in different directory paths. And therefore, if you specify a relative path, it will be relative to different paths in each, and one of them will clearly not point to the right place. If you have other items with relative paths, such as images, they would also have the same issue, and it will be in all browsers, not just IE. (I assume, therefore, that you don't have many other relative paths on this page)

    The quick solution, as you already worked out, is to turn it into an absolute path, starting with a slash. This will ensure it's loaded from the same location in the site regardless of what the URL is that you load it from.

    However, the question hints at a bigger issue. A well-behaved site should not allow both of those URLs to be valid. The URL without a slash should redirect to the URL with a slash; it should not simply load the same content regardless of whether there's a slash or not.

    Allowing both URLs to load the same content is explicitly bad for your site's SEO. It means that Google will see your site as having two pages with the same content, and this in turn is counted as a minus point for your google rankings.

    The issue is easy to resolve using .htaccess/mod_rewrite, and ideally, you would resolve this issue with as much urgency as the original CSS3Pie loading issue.

    Hope that helps.