I am generating the favicon programatically from ASP.NET using C# which works fine in all browsers except for Chrome.
I'm passing the page to the method SetFavIcon and setting it using HtmlLink class which is forms part of the System.Web.UI.HtmlControls namespace. This is how I'm doing it;
public static void SetFavIcon(Page p)
{
HtmlLink link = new HtmlLink();
link.Attributes.Add("type", "image/'x-icon");
link.Attributes.Add("rel", "shortcut icon");
link.Attributes.Add("href", HttpContext.Current.Request.Url.Authority + "/_graphics/_icons/favicon.ico");
p.Header.Controls.Add(link);
}
I've tried several options such as changing the type, adding a query string after favicon.ico but can't figure out why it is only happening in Chrome (works fine in Internet Explorer, Mozilla Firefox, and Microsoft Edge).
I'm testing on the latest version of Google Chrome - Version 49.0.2623.112 m
Check the whole <head> section of your page and look for non-header markups (div, p, etc.). For example:
<html>
<head>
<title>My page</title>
<div>This div has nothing to do here!!</div>
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
...
</body>
</html>
Unlike Firefox or IE, when Chrome encounters a non-header markup in the header, it considers it to be over and supposes this is the beginning of the body. And because the link markup is not body-related, Chrome simply ignores all links that appear after the faulty non-header markup. So in the example above, the title works (it is before the div) but not the link.
Related
Not sure if I'm doing something wrong here or whether this indeed is a Chrome rendering bug.
Here is my very small example:
.hover-test span {
opacity: 0;
transition-property: opacity;
transition-duration: 1000ms;
}
.hover-test:hover span {
opacity: 1;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST opacity</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<button class="hover-test">hover me<span>hidden</span></button>
</body>
</html>
It works in all browsers I checked like expected.
It does work in Chrome as well, when I put the CSS in a style tag directly in the HTML file.
It does NOT work in Chrome (91.0.4472.101), when I put the CSS in a separate file and include it with a link tag.
With "not working" I mean, that on page load the span is shown and then faded out, without the mouse cursor being near the button.
Is this a Chrome bug, or am I doing something wrong here?
How can I achieve the desired behaviour in Chrome, which is: span is hidden on page load and only shown/hidden on hover?
It looks like it is a Chrome bug,as written here: https://www.hawkbydesign.com/weird-google-chrome-css-transition-on-load-bug/
Well, after making some further updates and refreshing the page, I noticed that the transition was firing on page load. What I mean by this is instead of being hidden on page load, as they should be, the elements were visible and would transition to their hidden state.
this is exactly the problem reported.
More:
The bug happens whenever you don’t have any script tags on the page, apparently. For whatever reason, this causes css transitions to trigger upon page load. While I was also digging, it appears that this happens sometimes with the form tag as well. What a weird bug!
The solution is to include a script tag in your page. Whenever I found the solution, they said to include a space in the script tag, but I found that it works fine even without the space.
I actually added jQuery on the page using the CDN link and the bug seems gone.
You appear to be bumping up against a timing problem.
Try this code with your styles file:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST opacity</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link href="style.css" rel="stylesheet">
<style>
</style>
</head>
<body>
<script>
function insert() {
document.body.innerHTML = '<button class="hover-test">hover me<span>hidden</span></button>';
}
window.onload = insert;
</script>
</body>
</html>
This waits for loading before putting the button in the document and on Chrome (and Edge) on Windows10 at least all is well.
Chrome/Edge seem to differ from say Firefox in whether loading is synchronous or not - or maybe it's just a lot faster writing the document.
please help. My CSS is not working. I tried changing the name - not working, I changed folder - and the test worked, then I tried to change style again and nothing, the style I put the first time is there even if I delete it. When I look it at developers tool in chrome it shows the style I deleted. I'm stuck. My original code is not necessary, I made just the test.php and login.css and this simple code is not working.
#charset "utf-8";
/* CSS Document */
body {
background-color: red;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel = "stylesheet" type = "text/css" href = "style/login.css">
</head>
<body>
<p> Some text </p>
</body>
</html>
so the first time I put background-color: blue, and it worked, but now I change it and it stays blue, and nothing else I do, doesn't work.
I'm working in WordPress, but from theme page, I have the link to my other page that has nothing to do with it, everything is working great, except CSS. could it be the conflict with WordPress?
You need to clear the cache. Your code works fine. In chrome
Open DevTools (Ctrl+Shift+I)
Open Settings (F1)
Check Disable cache (while DevTools is open)
I guess you are stuck with caching problem, Chrome loads the cache so that is why you are not able to update Try this,
<link rel = "stylesheet" type = "text/css" href = "style/login.css?id=1">
IE11 will NOT load external css from the intranet - at all. Internal css works fine. In-line css works fine. External CSS works fine on the Internet. Everything works fine in other browsers - everywhere!
When I open C:\Users\hennesse\Desktop\test.html (below) by either right-clicking and openWith->IE - or- typing into the IE location bar, I get two alerts: "internal javascript", and "external javascript" - then:
the first line is NOT red
the second line is blue
the third line is green
However, if I upload this to my web server, and open it with IE, the first line IS red. With Firefox and Chrome, the first line is ALWAYS red, intranet or internet.
For some reason, IE11 will not load the external CSS file on "My Computer".
Changing security settings in Internet Options->Security->Allow Active Content to run in My Computer (and rebooting) results in a prompt (or not) about Allow Active Content? But the results are the same.
This is driving me insane! -Dave
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="test.css">
<!--
external file test.css contains:
body { color: #ff0000 }
-->
<style type="text/css">
.blue {
color: blue;
}
</style>
<script type="text/javascript">
alert("internal javascript");
</script>
<script type="text/javascript" src="test.js">
// external file test.js contains
// alert("external javascript");
</script>
</head>
<body>
This should be red, but it isn't
<p class="blue">
This is blue
</p>
<p style="color:green">
This is green
</p>
</body>
</html>
In the F12 console, I found: SEC7113 "CSS was ignored due to mime type mismatch". Discussion here: 1 [MSDN]. It seems that IE9 and above "sniff" the HTTP headers for the correct MIME type, and ignore JS and CSS that have the wrong header. When it fetches files from the local filesystem, it should disable this sniffing, since there aren't any real HTTP headers.
But my particular computer is sniffing and ignoring anyway. I've searched and searched, but the mighty Internet has only yielded one other person who has this problem. She solved it by reloading the operating system. I'm not gonna do that!
I very seldom use IE for anything except a final compatibility check after I've loaded stuff to a server. Except for one personal "extension" to a Windows app that invokes IE on the user's computer. Since I'm the only using it, I just hit F12, and select IE8 mode (this shows it's the IE9-up MIME sniffing). It works fine, and since it only costs me a couple mouse clicks, it sure beats reloading the OS.
Although I didn't really solve the problem, perhaps the "sniff and ignore" info can help someone else do so. OCHI - thanks for your help.
-Dave
I loaded a Javascript widget that outputs HTML, CSS, and additional Javascript.
The source of the page (test.html) is just
<!DOCTYPE html>
<html lang="en">
<head>
<title>Widget Test</title>
</head>
<body>
<div id="widget"></div>
<script type="text/javascript" src="http://widgets.some.site/render?element_id=widget_id&customer_id=999999&gallery=22222&widget_config=769792669" async="async">
</script>
</body>
</html>
The script executes and generates a widget. I can see the HTML nodes in the Element tab of Chrome DevTools. When inspecting a particular element, the inspector says that its style is located at test.html:239, but when I click on the link, it shows me the source page again.
When I load the page in Firebug, clicking on the line number sends me to an internal version of the stylesheet maintained by Firefox. Is there a way Chrome DevTools does this as well? I like Firebug's output of dynamically generated CSS, since I can copy and paste very easily.
No, you won't be able to see the source, as for dynamically generated <style> tags it is not stored anywhere and is thrown away right after parsing, unlike for the external or inline stylesheets, which have the underlying source text (in the foo.css file or in the loaded document <style> tag, respectively).
You are navigated to the document, since you cannot see the stylesheet itself, and it is the DevTools' best effort in this case.
I have a website, where IIS sends the following in the header (which is correct for the overall site):
X-UA-Compatible: IE=Edge
However, on a specific page, I have at the very top of my <head> section the following:
<!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<![endif]-->
This is being interpreted correctly by IE8, as it shows up at the top of the when I view the page source. However, it never changes my Document Mode from "IE8 Standards" to "IE7 Standards." The Browser Mode is in IE8 Compatibility View by default(it's an intranet site), but even in normal IE8 mode, it still has the same Document Mode issues.
I thought that having the meta tag on the page overrides whatever was sent in the initial header from the server. Is there anything else I could be doing to change the document mode for this one page?
EDIT: I can force IE7 document mode if I place the following in my Page_Load of my aspx page Response.AddHeader("X-UA-Compatible", "IE=7"); so I now have this header show up after the IE=Edge header, so only this second one is interpreted. This doesn't actually solve my issue though, because the meta tag above has the advantage of not being used in IE9 or IE10, and some of the niceties of the page disappear when forcing to IE7 document mode. I just specifically need this to work for IE8 and older.
Also, if I remove the conditional CSS, it appears to get the document mode correct. So is it possible that conditional CSS executes after the page loads, and if so, how do I fix it to make IE7 document mode only show up for IE8 and earlier browsers?
Are you sure you have the order correct? I just tried this page that I found HERE and my browser defaults to "IE7 standards".
<html>
<head>
<!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=7" >
<![endif]-->
<title>My webpage</title>
</head>
<body>
<p>Content goes here.</p>
</body>
</html>