<meta name="viewport" content="user-scalable=no,"/>
<style type="text/css">
html, *, body, div, table {
-ms-touch-action:none !important;
}
</style>
Above is the markup I have tried to get IE 10 to stop zooming every time the customers press the same place on the page fast. I am using IE 10 on Windows 8. This is the only combination I am concerned with. I have a few questions:
Is there a way to disable double-tap-zoom?
Do I have to use JavaScript?
Do I need reference material?
Is this an IE bug?
This seems to disable the double-tap zoom:
-ms-content-zooming: none;
I have just created an HTML5 page with a background image in the top center.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Example</p>
</body>
</html>
With the following CSS:
body
{
background-image: url('images/bg.png');
background-position: top center;
background-repeat: no-repeat;
margin: 0;
padding: 36px 0 0 0;
}
But I have spotted a problem in Firefox 12.
No matter how much I shrink the browser window, the HTML element never falls below 376px. This causes the background position to no longer appear in the center, but instead it looks like it is right-aligned (and then crops the right-hand portion of the image).
In Chrome, Opera and Internet Explorer it works as expected, but in Firefox I get this strange behaviour. I have added a screenshot of all four browsers showing this page.
UPDATE
This seems to be related to the size of the toolbar in the browser as the width it stops at is identical to the width of the browser toolbar. A colleague has just tried it and his toolbar is 427px and it stopped at this value. I presume this is a Firefox bug.
Your code shrinks properly in Firefox 12 for me.
I think it's one of your addons causing the problem. So you might want to disable a few and see if the problem goes away.
Also, try running Firefox in safe-mode and seeing if the problem exist.
"C:\Program Files\Mozilla Firefox\firefox.exe" -safe-mode
I think I resloved problem with Firefox. Check my answer to the same topic here and give me feedback if it was helpful ;) I don't want to paste the same answer in two places ;)
It looks like this is a genuine bug in Firefox, so I have raised a bug.
Yup, you just read that.
My Googling gave me tons of results where people wanted a transparent background, and it appeared white.
Today, I stumbled upon the opposite ! It seems to be a real bug since I was able to reproduce it in a JSFiddle : http://jsfiddle.net/qtByH/
The background-color is set to red by default, and everything works fine. If you change it to white and re-run the fiddle (using IE7, of course), the background remains transparent when you hover the link.
Any thoughts ?
Edit : here is the code in case the fiddle vanishes away.
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
Test
</body>
</html>
CSS :
body { background-color: green; }
a:hover { background-color: red; }
Well, you have an HTML document inside another HTML document, which probably makes the browser revert to quirks mode. The JsFiddle site already adds a document around the HTML code, so you should not enter a complete HTML document.
http://jsfiddle.net/Guffa/qtByH/3/
Do you have a chroma filter somewhere?
filter: Chroma(color='#ffffff');
or
filter:progid:DXImageTransform.Microsoft.Chroma(color='#ffffff');
or something like that?
A chroma filter set's a color to be transparent.
http://msdn.microsoft.com/en-us/library/ms532982(v=vs.85).aspx
See the fiddle without unnecessary html code and demo for output:
Fiddle: http://jsfiddle.net/qtByH/5/
Demo: http://jsfiddle.net/qtByH/4/embedded/result/
As pointed out in my comment, zoom: 1; was the way to go (must have been yet another hasLayout issue).
I am completely stumped as to why this doesn't work. It seems the HTML file can't load the CSS for some reason, even though both are in the same directory. Any idea what might be the problem?
index.html
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<link rel="stylesheet" href="style.css" media="screen" />
<meta name="viewport" content="width=1100">
</head>
<body>
<div id="main"> Hello </div>
</body>
</html>
style.css
body{
background-color: #F9F9F9;
background-image: url(images/bg3.png);
background-position: center top;
background-repeat: repeat;
text-shadow: #FFFFFF 0px 1px 0px;
font-family: "Georgia", "Times", serif;
-webkit-font-smoothing: antialiased;
}
a{
text-decoration: none;
}
#main{
margin: 50px auto 50px auto;
width: 1000px;
min-height: 500px;
padding: 0px 20px 0px 20px;
}
The above doesn't work. Adding the css inline in index.html works fine though
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<style type="text/css" media="screen">
body {
background-color: #F9F9F9;
background-image: url(images/bg3.png);
background-position: center top;
background-repeat: repeat;
text-shadow: #FFFFFF 0px 1px 0px;
font-family: "Georgia", "Times", serif;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
}
#main {
margin: 50px auto 50px auto;
width: 1000px;
min-height: 500px;
padding: 0px 20px 0px 20px;
}
</style>
<meta name="viewport" content="width=1100">
</head>
<body>
<div id="main"> Hello </div>
</body>
</html>
Add
type="text/css"
to your link tag
While this may no longer be necessary in modern browsers the HTML4 specification declared this a required attribute.
type = content-type [CI]
This attribute specifies the style sheet language of the element's
contents and overrides the default style sheet language. The style
sheet language is specified as a content type (e.g., "text/css").
Authors must supply a value for this attribute; there is no default
value for this attribute.
Check both files in the same directory
and then try this
<link href="style.css" rel="stylesheet" type="text/css"/>
As per you said your both files are in same directory. 1. index.html and 2. style.css
I have copied your code and run it in my local machine its working fine there is no issues.
According to me your browser is not refreshing the file so you can refresh/reload the entire page by pressing CTRL + F5 in windows for mac CMD + R.
Try it if still getting problem then you can test it by using firebug tool for firefox.
For IE8 and Google Chrome you can check it by pressing F12 your developer tool will pop-up and you can see the Html and css.
Still you have any problem please comment so we can help you.
You have to add type="text/css" you can also specify href="./style.css" which the . specifies the current directory
I have struggled with this same problem (Ubuntu 16.04, Bluefish editor, FireFox, Google Chrome.
Solution: Clear browsing data in Chrome "Settings > Advanced Settings > Clear Browsing Data",
In Firefox, "Open Menu image top right tool bar 'Preferences' > Advanced ", look for this image in the menu:
Cached Web Content click the button "Clear Now".
Browser's cache the .css file and if it has not changed they usually won't reload it. So when you change your .css file clear this web cache and it should work unless a problem exists in your .css file.
Peace,
Stan
With HTML5 all you need is the rel, not even the type.
<link href="custom.css" rel="stylesheet"></link>
Well I too had the exactly same question. And everything was okay with my CSS link. Why html was not loading the CSS file was due to its position (as in my case).
Well I had my custom CSS defined in the wrong place and that is why the webpage was not accessing it. Then I started to test and place the CSS link to different place and voila it worked for me.
I had read somewhere that we should place custom CSS right after Bootstrap CSS so I did but then it was not loading it. So I changed the position and it worked.
Hope this helps.
Thanks!
Also make sure your link tag's media attribute has a valid value, in my case, I was using WordPress CMS and passed the boolean value true in the media field so it showed like that.
<link rel="stylesheet" href="./style.css" media="1">
That's why it was giving error.
There are three main attributes on which the css style loading depends.
Make sure that your link tag's relation rel attribute's value must be valid for a css file i.e. stylesheet.
Make sure that your link tag's target href attribute's value must be pointing to a valid an existing Cascading Stylesheet file. Like in your case it's ./style.css.
Remember that you can use both absolute and relative paths in the href attribute's value. That means if your file style.css is present at the root i.e. / then you can also use /style.css in the href attribute's value or else if the file is present in the same directory in which your HTML file is present then you can use ./style.css as the value in your link tag's href attribute's value.
Make sure that your link tag's media attribute should be one of the following.
For every device you can use the all keyword as your media attributes's value.
For PC's and laptops only you can use the screen as your media attribute's value.
For webpage prints you can use the print keyword as your media attributes's value. Note that it also applies when you press the Print Screen button to capture the screen's image.
At last for screen readers you can use the speech keyword as your `media attribute's value.
By following these rules your HTML structure for link tag will be.
Your css file should be defined as UTF-8. Put this in the first line of you css file.
#charset "UTF-8";
You could try this:
<link href="style.css" rel="stylesheet" type="text/css" media="screen, projection"/>
Make sure that the browser actually makes the request and doesn't return a 404.
I found myself out here looking for an answer and figured out that my issue was a missing character - spelling is important.
<link href="tss_layout.css" rel=styleheet" />
once I put the s in the middle of stylesheet - worked like a charm.
I had been facing the same issue,
For Chrome and Firefox but everything was working how it should in internet explorer. I found that making the CSS file UTF-8 made it work for chrome.
<link href="style.css" rel="stylesheet" type="text/css"/>
I had a similar problem and tested different ways to solve it.
Eventually I understood that my index.htm file had been saved with "Unicode" encoding (for using Farsi characters in my page) while my .css file had been save with "ANSI" format.
I changed the encoding of my .css file to "Unicode" with Notepad and the problem got solved.
Not sure this is valuable, but I will leave this here for others. Making sure that "Anonymous Authentication" was set to "Enabled" loaded my CSS file correctly.
To do that in Visual Studio 2019:
Select your solution's name, right click, and hit "properties"
Navigate to the "Properties" frame, typically in the bottom right corner
Ensure that "Anonymous authentication" is set to "Enabled" as shown below
Here is another cause to add to the collection on this page. In this code...
<link rel="stylesheet" type="text/css" href="styles/styles.css" media="screen">
...I misspelled rel as ref.
After digging and digging on this issue, for me it was solved by Johannes on another thread: Local CSS file is not loading from HTML
The type attribute in your link tag has typographical quote
characters: type=“text/css”. Try to change these to "plain" quotes
like type="text/css"
I had similar problem.. my code was working fine but suddenly css sheets stopped working.. after some detection I found out that somehow the MIME of style sheet was changed from type="text/css" to "text-css".. Idk how they were changed since the code was working few hours ago but however I changed it and it worked fine. hope this helps.
Well I faced this issue today and as workaround (not the best) I did below
<script type="text/javascript" src="testWeb/scripts/inline.31e1fb380eb7cf3d75b1.bundle.js"></script>
where testWeb is my root app folder in my htdoc dir. in windows (using xampp) or in /var/www/html directory as for some reason I do not know yet
<script type="text/javascript" src="scripts/inline.31e1fb380eb7cf3d75b1.bundle.js"></script>
not loading while html index file beside scripts folder in same directory.
This may be a 'special' case but was fiddling with this piece of code:
ForceType application/x-httpd-php
SetHandler application/x-httpd-php
As a quick test for extentionless file handling, when a similar problem occurred.
Some but not all php files thereafter treated the css files as php and thus succesfully loaded the css but not handled it as css, thus zero rules were executed when checking f12 style editor.
Perhaps something similar might occur to any-one else here and this tidbit might help.
I was having similar problem but resolved changing the Style.css to style.css Because of this name caps letter "S"change it was throwing 404 error we won't notice small changes in my system it was working but when I hosted in cloud it was throwing this error make sure this all being checked after uploading in cloud
i have the same probleme, i always change the "style.css" to "styles.css" or any other name
and it worked fine for me.
HTML was not loading my css because i had placed the style.css in template folder rather it should be in static folder . After replacing my file to static folder it worked for me
Use the following steps to load .CSS file its very simple.
<link rel="stylesheet" href="path_here.css">
note: 1--> don't forget to write "stylesheet" in rel attribute.
2--> use correct path e.g: D:\folder1\forlder2\folder3\file.css"
Now where ever directory you are in, you can load your .css file exactly path you mention.
Regards! Muhammad Majid.
guys the best thing to try is to refreash the whole website by pressing ctrl + F5 on mac it is CMD + R
Add type="text/css"
It worked for me.
Are unused CSS images downloaded by the browser or ignored?
Eg. in CSS rules which don't match any elements.
.nothingHasThisClass{background:url(hugefile.png);}
Or would this be browser-dependant?
This would be browser dependent, since it's how they decide to implement the spec, however in a quick test here:
Chrome: Doesn't
FireFox: Doesn't
Safari: Doesn't
IE8: Doesn't
IE7: Doesn't
IE6: Unknown (Can someone test and comment?)
No, they are not downloaded, not at least in Firefox, IE8 and Chrome.
An easy way to test this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.nonexistent {
background: url('index.php?foo');
}
</style>
</head>
<body>
<?php if(isset($_GET['foo'])) {
file_put_contents('test.txt', $_SERVER['HTTP_USER_AGENT']);
} ?>
</body>
</html>
If test.txt is populated with the browser's user agent, then the image is downloaded. This was not the case in any of my tests.
A quick test proved it.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css"><!--
.hasnothing{background-image:url(http://25.media.tumblr.com/tumblr_ky7aakqvH01qatluqo1_400.jpg);}
.hassomething{background-image:url(http://27.media.tumblr.com/tumblr_kxytwr7YzH1qajh4xo1_500.png);}
--></style>
</head><body>
<div class="hassomething"></div>
</body></html>
The 2nd image, tumblr_kxytwr7YzH1qajh4xo1_500.png, was downloaded but not the other one. This was proven true in Chrome (Developer tools) and Firefox (Firebug).
Firefox and Chrome (Ubuntu 9.10) don't download images for classes/ids that aren't applied in the DOM.
This may be both platform and browser dependant, though.
Sometimes, it depends just exactly what "unused" means. Different browsers define it differently. For example, in Firefox, styles applied to the <noscript> tag are deemed "unused" and thusly, any images won't be downloaded.
Chrome 26 (possibly all of them, not sure), does download CSS images if they are applied to the <noscript> element, even when JS is enabled. (It isn't immediately clear to me why though, perhaps this is a bug?).
It does not download CSS images applied to elements within the <noscript> element, though. (this is expected behaviour, of course).
Example:
CSS:
noscript { background-image: url('always.png') 0 0 repeat; }
noscript p ( background-image: url('nojsonly.png') 0 0 repeat; }
HTML:
<noscript>The CSS background image of this NOSCRIPT-element will always be downloaded in Chrome. Will not be downloaded in Firefox</noscript>
<noscript><p>The CSS background image of this P-element won't be downloaded in Chrome or other browsers, unless JS is disabled</p></noscript>
In this case, if the user has JS-enabled, both always.png and otherbg.png are downloaded in Chrome. If the user does not have JS enabled, then only nojsonly.png is downloaded in Chrome.
I use this technique for measuring traffic-levels from non-JS-enabled users, as Google Analytics fails us here. I prefer using the background CSS image rather than a normal <img...> tag, because I'm working under the (untested) theory that bots are less likely to grab a CSS image than a <img...> image, leaving more accurate counts for the human-visitors.
Almost all browsers do lazy-loading. If an image is not required, it does not download. Use firebug (add-on in Firefox/Chrome) to see load time for resources.
Interestingly, though, Chrome (at least) will download unused.png in the following example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
.unused {
background: url(unused.png) no-repeat;
}
.used {
background: url(used.png);
}
</style>
</head>
<body>
<div class="unused used">
hello world
</div>
</body>
</html>