I have a master page to apply to all my pages, the master page is doing its work however, it seems that is unable to resolve the CSS file address for pages I have in child folders.
I have a set of folders like this:
RootContent
UsersContent
AdminContent
Since the master page and css files are on the Root content, when the master page tries to locate the css file inside UsersContent or AdminContent it cannot find it.
I'm using JavaScript to detect the browser and set the css properly for most browsers and another file for IE6 since is required in here, any ideas?.
<script type="text/javascript">
if((BrowserDetect.browser.toString() == "Firefox") && (BrowserDetect.version.toString() == "3.5"))
{
document.write('<link rel="Stylesheet" href="<%=ResolveUrl("~/StyleSheet.css") %>" type="text/css" />');
}
else if((BrowserDetect.browser.toString() == "Explorer") && (BrowserDetect.version.toString() == "6"))
{
document.write('<link rel="Stylesheet" href="~/StylesheetIE6.css" type="text/css" />');
}
</script>
In the code above I tried <% ResolveUrl("~/StyleSheet.css") %> but didn't work, it works while in the same folder but not on the childs.
EDIT: Just to clarify my CSS file is on my Root Folder not on the childs
A simplest way Add App_Themes folder under your web project. Add a theme and under that theme add all css files include their respective image directories.
In your web.config, add
It will automatically get added to the every page.
Note:- In this case all css will get applied. If you have browser specific css, then this is not the way.
[SEE UPDATED]
a CSS file like "iespecific.css" to be loaded by IE 6 and not other browsers, use the following code in the HEAD section of your web page:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
Likewise, for any version of IE 5 (including 5.0, 5.01, 5.5, etc), use the following:
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
to detect the release build of IE 5.5, you will need the following code:
<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
For example, to test for all versions of IE greater than or equal to version 6, you can use
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="iespecific.css" />
<![endif]-->
The above code examples work because a normal browser sees the entire block as HTML comments since they are enclosed within "". IE 5 or above will however attempt to parse the block to see if it has instructions specific to it.
You can also exclude a certain style sheet using this method. For example, to exclude the CSS file "not-ie.css" from IE 6, use:
<![if !(IE 6)]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]>
Notice the operator "!" immediately preceding "IE". This is the NOT operator, causing the statements following to be used only if the expression "IE 6" is not matched by the browser.
Again, the above code works because a normal browser will interpret "" and "<[endif]>" as HTML tags that it does not recognise, and ignore them. This code, however, will not validate as correct in a HTML validator, since it does not use valid HTML tags.
Note that you can also test for IE without specifying a version number. For example, the following loads the style sheet only if the browser is not IE 5 or above:
<![if !IE]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]>
Microsoft's documentation for this non-standard feature can be found at http://msdn2.microsoft.com/en-us/library/ms537512.aspx
Since the documentation does not specify that these features apply only to the Windows versions of IE, I assume that they also apply to the Macintosh version. I'm not able to verify this though.
I have always used ResolveClientUrl for this purpose. Can you try that instead of ResolveUrl? And here's a post discussing the difference.
Have you tried adding runat="server" to the link tag? Worked for me.
Related
I am trying to call a different style sheet in the head section of my page depending on if the browser used is IE. It's "greyed" out but from what I understand, it's still supposed to work this way. The two style sheets are identical except for one line. But, it's not linking to mainIE.css and not replacing main.css. Am I doing something wrong?
<link href="examples/main.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="examples/mainIE.css" rel="stylesheet" type="text/css" />
<![endif]-->
First, the conditional comments aren't supported in IE 10 and up. That may be why you are not seeing the other stylesheet load.
Second, the conditional comment won't instruct IE to replace your first stylesheet, just to load up another one. Typically in the second stylesheet you would just put in only the differences and let the C in CSS take care of it for you.
Try the following:
<!--[if !IE]><!--><link href="examples/main.css" rel="stylesheet" type="text/css" /><!--<![endif]-->
<!--[if IE]><link href="examples/mainIE.css" rel="stylesheet" type="text/css" /><![endif]-->
Also I knew you can do the same thing within one CSS file, if only one line is the difference.
as noted, conditional comments don't work in ie10+; you need to use conditional compilation to target them...with that said, i'm not sure how to differentiate between ie10, 11 and mobile exactly, but i bet you can simply check your jscript version. here's a demo of conditional compilation
http://dev.bowdenweb.com/ua/browsers/ie/conditional-compilation.html
The second ('commented') stylesheet for IE will NOT replace your existing stylesheet. It's added in as a comment so all other browsers ignore it, and IE tries to find comments with this [if] statement in it to display that content. Your IE stylesheet can simply overwrite that single line that's different instead of the whole stylesheet (DRY!), saving the IE user a duplicate download.
The latest versions of IE do not support them anymore (http://www.sitepoint.com/microsoft-drop-ie10-conditional-comments/), otherwise you can find more info here: http://msdn.microsoft.com/en-us/library/ms537512%28v=vs.85%29.aspx
[EDIT: here is a Javascript solution]
You could always do it with javascript if you went to target only IE users. You could do something like the following:
var useragent = navigator.userAgent.toLowerCase();
var internetExplorer = (
useragent.indexOf("trident") >= 0
|| useragent.indexOf("ms") >= 0
|| useragent.indexOf("ie") >= 0
) ? true : false;
if(internetExplorer){
// do whatever you want here, like...
document.getElementById("myElement").style.height = "100px";
}
[EDIT2:] Actually, you could just write the stylesheet if its IE:
if(internetExplorer){
document.write('<link href="examples/main.css" rel="stylesheet" type="text/css" />');
}
I am creating a website for my company's product (I am pretty new at this), and I have just realised that A LOT of the formatting I have done seems to be completely ignored by IE versions 8 and below.
Is there a way for me to make the website direct the users of these browsers to a completely different and extremely simplified version of my website?
Any advice will be greatly appreciated!
The better way is to fix the issues by using a different stylesheet for IE8 and below.
This can be done using the conditional statements.
<!--[if lte IE 8]>
// Your IE8 and below HTML code here or
// Perhaps importing a specific style sheet as
<link rel="stylesheet" type="text/css" href="ie8_and_below.css" />
<![endif]-->
If you wish to have a simplified version for IE8 and below, add this script on the page for which you want to have a minimized version.
<!--[if lte IE 8]>
<script type="text/javascript">
window.location = "http://www.example.com/ie8";
</script>
<![endif]-->
Then add your HTML markup on ie8 HTML page which will be only for IE8 and below.
You can target IE versions using conditional statements to include CSS files only to be loaded by those browsers. For example, to load a stylesheet only in IE8 and below, use:
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
You can read more about conditional statements for IE here.
Alternatively you could sniff out the browser user-agent, and redirect accordingly but this is a less ideal solution, and it would involve page duplication.
You can get the version of the browser by the DOM object. Then you can put that in a if-else and check the version to be greater or not and then according redirect your page to somewhere else. You can also check if the user is using IE or some other browser.
var ver=navigator.appVersion;
var brw=navigator.userAgent;
if(brw.equals("msie"))
{
if(ver<8)
//redirect
else
//stay or something else
}
hope this helps.
I'm not seeing this issue in any other browser that I've tested - IE, Chrome, Opera - but whenever I load a page from the server, I'm seeing a flash of unstyled content before the CSS is applied.
This is even happening on subsequent page loads where everything should be cached - every time the page loads I see the unstyled content for a split-second, then everything settles in.
It's also worth noting (perhaps?) that the page is using #font-face to pull some Google fonts. They are stored in a separate stylesheet being pulled after the main responsive stylesheets and media queries.
I've tried a few different things, to no effect:
Rearranging order of CSS stylesheet links
Removing link to stylesheets with #font-face
Disabling Firebug? (Read on here somewhere...)
One other thing that may be worth mentioning is that I used quite a lot of Element Type CSS selectors in the page's CSS. Is it possible that this is slowing down the rendering process?
This seems unlikely as there is no problem immediately re-rendering the page upon changing the dimensions of the window - the responsive stuff renders fine immediately.
So this leads me to believe that there is some issue with how the CSS is being loaded.
Here is my HEAD code:
<!DOCTYPE html>
<head>
<!--<meta name="robots" content="noindex" />-->
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi" />
<title></title>
<!-- responsive stylesheets -->
<link rel="stylesheet" href="resources/css/320.css" type="text/css" media="screen and (max-width:320px)" />
<link rel="stylesheet" href="resources/css/480.css" type="text/css" media="screen and (min-width:321px) and (max-width:480px)" />
<link rel="stylesheet" href="resources/css/768.css" type="text/css" media="screen and (min-width:481px) and (max-width:768px)" />
<link rel="stylesheet" href="resources/css/960.css" type="text/css" media="screen and (min-width:769px) and (max-width:960px)" />
<link rel="stylesheet" href="resources/css/960+.css" type="text/css" media="screen and (min-width:961px)" />
<!-- custom fonts stylesheet -->
<link rel="stylesheet" href="resources/css/fonts.css" type="text/css" />
<!-- favicon -->
<link rel="shortcut icon" href="resources/images/ui/favicon.ico">
<!--[if lt IE 9]>
<link rel="stylesheet" href="resources/css/960+.css" type="text/css"/>
<![endif]-->
</head>
WTF is going wrong with Firefox? It's driving me nuts!
If you add a dummy <script> tag right after <body>, Firefox will show the page after all the css from <head> is loaded:
<body>
<script>0</script>
<!-- rest of the code -->
</body>
There is an official bugreport about this FOUC (Flash Of Unstyled Content) on the Firefox site: https://bugzilla.mozilla.org/show_bug.cgi?id=1404468
I had the same problem with Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. showing in the console, and a visible flash of unstyled content upon page refresh, withouth (F5) or with clearing the cache (Ctrl + F5). Having the developer tools open does not made a difference either.
What helped me was declaring a variable in a script just before the </head> tag ended, so basically after all the <link> tags.
It's important to note, that an empty script (or with just a comment) or any random javaScript would not help, but declaring a variable worked.
<head>
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/other.css" />
<script>
/*to prevent Firefox FOUC, this must be here*/
let FF_FOUC_FIX;
</script>
</head>
There was no need to rearrange links or not use imports within css or js files.
Please note that the issue will no longer be visible (FOUC is visibly gone), but the console might still show the same warning.
I was experiencing this error. A colleague has said that it's caused by the attribute, autofocus being added to a form field.
By removing this attribute and using JavaScript to set the focus the brief flash of unstyled content stops happening.
For what it's worth, I had this same problem and found that it was being caused by having poorly formatted <html>...</html> tags.
To be precise, in my code I accidentally closed the HTML tag too early, like this:
<!DOCTYPE html>
<html lang="en"></html>
<head>
<title>My title</title>
The code provided by the original poster is missing the opening <html> so I suspect that's probably what is happening there.
Filament Group share they way they load their fonts in detail,
http://www.filamentgroup.com/lab/font-loading.html
which is a nice modern approach to #font-face loading
Smashing magazine also review there website performance and came up with a different solution that stores the caches a base64 copy of the font in local storage. This solution may require a different licence for you font.
A gist can be found at:
https://gist.github.com/hdragomir/8f00ce2581795fd7b1b7
The original article detailing their decision can be fount at:
http://www.smashingmagazine.com/2014/09/08/improving-smashing-magazine-performance-case-study/#webfonts
Additional recommendation
The head of your document contains far to many individual stylesheets, all these css files should be combined into a single file, minified and gziped. You may have a second link for your fonts placed before you main stylesheet.
<link rel="stylesheet" href="resources/css/fonts.css" type="text/css" />
<link rel="stylesheet" href="resources/css/main.css" type="text/css" />
I've had the same issue. In my case removing #import rule in the CSS file and linking all the CSS files in the HTML resolved it.
In my case the reason of FOUC in FF was the presence of iframe on page.
If I removing iframe from markup then FOUC disappears.
But I need iframe for my own hacking reasons so I changed this
<iframe name="hidden-iframe" style="display: none;position:absolute;"></iframe>
into this
<script>
document.addEventListener('DOMContentLoaded', ()=>{
let nBody = document.querySelector('body')
let nIframe = document.createElement('iframe');
nIframe.setAttribute('name', "hidden-iframe");
nIframe.style.display = 'none';
nIframe.style.position = 'absolute';
nBody.appendChild(nIframe);
});
</script>
I've added this inline JS right in template just for readability: in my case this code runs once per page.
I know that it's dirty hack, so you can add this code in separated JS-file.
The problem was in Firefox Quantum v65.
I had the same problem (but also in chrome). Even if many of the existing answers provide clues to the reason for FOUC I wanted to present my problem and its solution.
As I said, I had FOUC in a fairly large project and already had the suspicion of a racecondition in some form.
In the project SASS is used and via a "bootstrap" file for the css a fontawesome free package was added via import.
#import "#fortawesome/fontawesome-free/css/all.css";
This import has increased the total size of the css file by a lot, which caused the file to take a long time to load, and the browser went and already loaded the following javascript.
The JS that was then executed forced the rendering of its content and thus created the FOUC.
So the solution in my case was to remove the big fontawesome package and insert the icons I used from it (~10) via an Icomoon custom font. Not only did this solve the FOUC but it also had the nice side effect that the delivered CSS files are much smaller.
I am in the process of cross browser testing my site and of course IE is giving me the biggest headache. I know I have to use conditional style sheets but am unsure of where to put these in rails so they are rendered only if IE7 or IE8 for example. I have seen a example on stack overflow but he seems to be using HAML whereas I am not.
Has anyone encountered this issue before and if so what did you do.
Thanks
Assuming you're using the asset pipeline, the only solution I've found for this so far is to not include your stylesheets so that they get compiled into the one file, but instead just include your IE stylesheet(s) separately in the head tag of your layout file as you normally would.
<head>
<!--[if IE 7]>
<link href="ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 8]>
<link href="ie8.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
I'm currently using HTML conditional statements to select a CSS file based on IE version. How do I do this on the server side instead.
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="style/ie6.css" media="screen" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/ie7.css" media="screen" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/ie8.css" media="screen" />
<![endif]-->
Determine the browser type from the HTTP request:
System.Web.HttpBrowserCapabilities browser = Request.Browser
Then render the page accordingly:
<% if (browser.Browser == "IE" && browser.MajorVersion == 6) { %>
<link rel="stylesheet" type="text/css" href="style/ie6.css" media="screen" />
<% } else if (browser.Browser == "IE" && browser.MajorVersion == 7) { %>
<link rel="stylesheet" type="text/css" href="style/ie7.css" media="screen" />
<% } else if (browser.Browser == "IE" && browser.MajorVersion == 8) { %>
<link rel="stylesheet" type="text/css" href="style/ie8.css" media="screen" />
<% } %>
I believe you have to set the runat="server" attribute within the <head> element of the page for this to work.
This isn't a very good way of doing it though. A better way would be to do it client-side using either JavaScript or the method used in the question.
What's your directory structure?
What ASP.NET Framework are you using, Webforms, MVC?
The only thing that come up to my mind is the CSS Path that you are using, in MVC for example, the default behavior you should write /Content/Css/ie6.css for example.
A good idea is always use the backslash sign / that will point to the website root and append the folder in the path from there.
Every thing else works well in ASP.NET, just remember that the only difference is that a plain HTML page does not need any server to run, so it picks everything where you open the file in your browser, an a PHP / ASP.NET need a Server to run into, so you need to respect the Server Paths.
By the way, I would recommend Html5 boilerplate if you are starting a new website...
I think you should stick with your current solution but if you need to do it server side you could always check the user agent and then register the stylesheet.
Something like this;
Dim userAgent As String = Request.UserAgent
If (userAgent.IndexOf("MSIE 6.0") > -1) Then
HtmlLink css = new HtmlLink();
css.Href = "css/ie6.css";
css.Attributes["rel"] = "stylesheet";
css.Attributes["type"] = "text/css";
css.Attributes["media"] = "all";
Page.Header.Controls.Add(css);
End If
Read more about the HttpRequest.UserAgent Property
Try this:
<link runat="server" rel="stylesheet" type="text/css"
ie:href="style/ie6.css" ie7:href="style/ie7.css" ie8:href="style/ie8.css"
ie9:href="style/ie8.css" ie0plus:"style/ie8.css"
media="screen" />
The property modifiers like "ie:" match the furthest element down the browser tree they can, so "ie" alone will match all IE browsers, but if it's IE7, then "ie7" will match instead. I don't think there's a browser pattern for IE6, which is why you need the keys for ie9 and ie10plus; since they are further down the tree, they will match instead of just "ie".
The .NET browser pattern files are located in:
C:\Windows\Microsoft.NET\Framework64\v4.0.30319\Config\Browsers
You can also add your own pattern files if you want (don't edit the existing ones). After adding one, run:
aspnet_regbrowsers -i
Note re. accepted answer (adding code to <head>):
This will cause an error if <head> is set as runat="server" and you (or any other code) attempts to alter the HEAD's .Controls collection.
The AJAX Control Toolkit does this in some situations.
not sure how to do it using aspx, but there are many ways to do it using JavaScript.