Menu
We have some HTML pages (local, not on a web server) that use the BASE element to identify a specific base directory that contains a bunch of common stylesheets and images. Here is an example (page is stored in c:\temp\html\test.html, resources directory is c:\temp\resources):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<base href="file:///c:/temp/resources/"></base>
</head>
<body>
<p><img src="image.jpg" /></p>
</body>
</html>
That works fine in all current browsers that I've tested (Firefox, Chrome, IE9) and works fine in IE8 in Quirks mode. But in IE8 running under IE8 standards mode (the default for this page - and in the real pages is the required mode) any stylesheet, script or image references are broken - it is as if the element is being ignored completely.
I've tried other variations on the element - <base href="file:///c:/temp/resources/"> or <base href="file:///c:/temp/resources/"/> as well as all sorts of different file urls, e.g. file:///c:/temp/resources/test.html etc. and also relative hrefs for the base but nothing seems to persuade the images/stylesheets/scripts to load.
I know that the example above seems trivial, but in our real scenario we have to load pages in IE8 under IE8 standards mode and have to set a specific so I'm really trying to figure out a solution if there is one.
I did turn up some references to a bug in early IE8 versions relating to the element, but they are marked as fix quite a while ago and I am testing this on a clean Windows 7 VM with all IE8 updates applied.
769
Status Update: Use: <base href="\\c:\temp\resources\" />
Here's the process I used in creating this solution to allow IE8 to use the Base Attribute for local files.
To clarify: This W3C validated solution works for IE7, IE8 and all modern browsers!
Reference Screenshot:
Since IE8 is treating Local Files differently, understanding the IE8 protocol for file:/// is important.
To realize what syntax methods are available, viewing Internet Options (Security Tab) for Local Intranet will give us that info. No changes are actually done here, just the syntax please:
In the above photo, the Local Intranet Window confirms that backslashes are required.
Also, it shows that the file:\\ protocol is associated with this slash syntax. Since file:/// protocol is implied automatically by IE8 (previously mentioned: see Browser's Status Bar and note slashes are rendered correct!!).
Defining this file: protocol in the Base tag is the issue. The solution is not to use a protocol!
*Of course, if you're viewing the file locally, it'll try to request the file with the
file://protocol.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using Base Tag with Local Files IE8 and Modern Browser DEMO</title>
<!-- The name of this file is: test.html -->
<!-- The location of this HTML file on the hard drive is: C:\temp\html\test.html -->
<!-- This unusually constructed Base attribute tag uses two rules to have it work for Locally Hosted IE8 Files that are not server based. -->
<!-- First, the "URL Scheme" is based on "Network Path Reference" which means no Protocol is used. -->
<!-- Second, the "forward slashes" are changed to "back slashes". It's the syntax IE8 actually expects. -->
<!-- This entire method is also friendly for modern browsers showing these local files that are not server based. -->
<base href="\\c:\temp\resources\" />
</head>
<body>
<p>
<!-- The location of this "image.jpg" on the hard drive is at: C:\temp\resources\image.jpg -->
<img src="image.jpg" alt="image" />
</p>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
