HTML <base> TAG and local folder path with Internet Explorer

Question

I am trying to use < base> TAG to indicate the source folder containing the media files for my html pages located in separate folder.

I have the following folder structure:

A
|- HTML_PAGES        (contains html files)
|- MEDIA_FOLDER      (contains the media used by this html pages)

I try to indicate the html files with the media used by html pages - so, in each html file i have something like this:

<base href="../MEDIA_FOLDER"/>

And the problem is: it works for some browsers (Opera, Chrome) but it doesn't work for Internet Explorer and Firefox. How to make it work with IE and Firefox?

Answer 1

This is definitely a very annoying bug in IE, but I just found a workaround.

The thing to realize is that IE does resolve the relative path, and then promptly ignores it. You can even see the fully resolved URL by checking the value of the base tag's 'href' property later on using JavaScript. So this (rather silly) piece of code resets the <base> tag's 'href' attribute to the very full URL that IE had already resolved, thereby causing it to no longer be ignored.

Add the following HTML to the top of your page, right after the tag and before you actually use any URLs:

<!--[if IE]><script type="text/javascript">
    // Fix for IE ignoring relative base tags.
    (function() {
        var baseTag = document.getElementsByTagName('base')[0];
        baseTag.href = baseTag.href;
    })();
</script><![endif]-->

(conditional comments necessary since this code can break the <base> tag in Safari/Chrome, and other browsers clearly don't need it.)

Such a silly bug.