html - CSS image pathing when sourced from a different host using IE -
[Setup: on ASP.NET MVC3 Azure for CSS files and assets for Azure Blob storage on HTTPS ]
I am currently building a website that selects a suitable CSS style sheet based on the selection of the host - this website is allowed to enable for different brands Which changes by all the CSS, but its control references the host tents Uses an MVC controller that detects the host, then redirects the css file and related assets (i.e. images) from a different location (using an asp.net rewrite rule). For example:
www.host1.com will reference a CSS file with requests from myCssAndAssets.mycoreserver.com/css/ www.host1. Com
www.host2.com will reference a CSS file with requests from myCssAndAssets.mycoreserver.com/css/ www.host2.com < / Strong>
This works completely different from a small problem, breaking things when using Internet Explorer. In short, Internet Explorer successfully receives the CSS file, but it can not reference any image referenced in that file. Here, all the images are referenced in the actual CSS file using a relative path, it is assumed that (from) ...
Partial URL (as in [RFC 1808] Defined) The base URL of the Style Sheet is not relative to the original URL of the source document.
An example of a used pathway (where the file as a css file has been redirected to the same directory) ...
Background-image: url ('icon-big-buttons.png');
In Chrome and Firefox, things are expected, where the image has been withdrawn from the same location in the form of a CSS file. Following is a screenshot of Fiddler - the first four entries are from IE, from the last three chrome - these requests were made from the same site.
Note: For clarification, the 'CSS' controller is the MVC site which then redirects to the CSS file in the Safe Blob storage.
The images that are hosted on the Host Host, while the Chrome CSS correctly references the images from the file's location.
It is very much like an IE client-side issue but my search (while hardly completely complete) has not been useful. I know that I can use full pathing but this is something I want to save because a large number of CSS files can be maintained ...
Any help or ideas appreciated . After afternoon pizza, I took a new look at the problem according to the advice of Brentad -
This time, especially in the rewriting rules, it appears that it was one that was causing problems after running a clean trial.
In short, I used a rewrite rule to redirect CSS and assets from the original site to all the browsers, but IE works just fine. IE has played well without redirects, but directly to reference CSS and assets.
My solution was to use the second rewrite rule, so to redirect a CSS and another to the path of the real property. This rule will bypass the controller and navigate to the appropriate host.
& lt; Rules & gt; & Lt ;! - Previously the rule was redirected from the controller to the style sheet - & gt; & Lt; Rule name = "csstoazure" stop processing = "true" & gt; & Lt; Mail url = "css-source /(.*)" /> & Lt; Action Type = "Redirect" url = "https://mycssandasssets.blob.core.windows.net/css/{R:1}" /> & Lt; / Rules & gt; & Lt ;! - The second rule is to capture images referenced in the style sheet, but use the host name - & gt; & Lt; Rule name = "cssieplayingnice" stopprocessing = "true" & gt; & Lt; Mail url = "css \ / (. * .png | | *. Gif | * .jpg | *. * Eot | *. * .. *}. & Lt; Action Type = "Redirect" url = "https://mycssAndasets.blob.core.windows.net/css/{HTTP_HOST}/{R:1}" /> & Lt; / Rules & gt; & Lt; / Rules & gt;
Hope this can help others ...
Comments
Post a Comment