A relative URL is not related to an IFrame when you dynamically create a style element that uses a relative URL for an external .css file in an HTML document

In an HTML document, you dynamically create a style element. The style element uses a relative URL for an external cascading style sheet (.css) file. If the HTML document that contains the style element is embedded in an inline frame (IFrame), the relative URL is not related to the IFrame as expected. The URL is incorrectly related to the parent frame.

For example, you create an HTML document that is named Parent.html in a folder. This folder also contains a folder that is named Inner. The Inner folder contains an HTML document that is named Child.html and a GIF image that is named Test.gif. You embed the Child.html file into an IFrame in the Parent.html file. In the Child.html file, you dynamically create a style element to reference the URL of the Test.gif file. However, you cannot use "./Test.gif" to reference the URL of the Test.gif file. You must use "../Inner/Test.gif" to reference the URL of the Test.gif file.

Note If you hardcode the URL in the HTML document and do not use a .css file, this problem does not occur.

To work around this problem, use one of the following methods:

• Use the absolute path to reference the URL.
• Put the following documents in the same folder:
  • The HTML document of the IFrame
  • The HTML document of the parent document

For more information, click the following article number to view the article in the Microsoft Knowledge Base: