I'm using Bourbon, which produces the following code.
The problem is that no text is shown in Internet Explorer 11 on Windows 7. It works fine with all the other browsers I've tried (Internet Explorer 11 on Windows 8.1 for example).
The problem is in font-feature-settings: "kern","liga","pnum"; line, generated automatically by Bourbon/Neat I guess.
Should I remove it, or is there a better solution? I really have no clue on what is going on, I was only able to spot the problematic line.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
<style>
body {
font-family: 'Orbitron', sans-serif;
font-feature-settings: "kern","liga","pnum";
}
</style>
</head>
<body>
Test
</body>
</html>
Try this :
https://jsfiddle.net/aakashshah/sLc2nmnq/2/
Rather than giving font for the whole body, define a class with <div> element and and add it just below the body tag.
See my answer: MSIE 10, web font and font-feature-settings causes invisible text
A bug in Windows 7 is causing text to disappear in IE10 and IE11 when the font-feature-settings css property is used. https://connect.microsoft.com/IE/feedbackdetail/view/831964
Related
My page is at http://jerswebempire.com/ovrtur/index.php
The page displays nearly perfectly in all browsers except IE8. In IE8, floated divs have incorrect margins. For example, you'll see the search bar at the top is sitting underneath the nav. However, if you open the page in Chrome or Firefox or IE9, it's displaying in the correct spot.
What am I doing wrong?! I can't seem to find a fix.
Also, the box for Latest Video is in two columns in all browsers but IE8. It's similar to the above problem where there is a left margin added that shouldn't be there.
The page was built with Bootstrap.
Any help would be appreciated.
Use ie conditionals between your index
<html> </html>
add a class to for the 'ie 8 only' margins like the html boilerplate does.
Load a custom ie 8 only stylesheet and play with the margin problem there like this:
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="ie8-only.css" /> <![endif]-->
Or load a class where you need it.
<!--[if IE 8]><html class="ie8 lt-ie9"> <![endif]-->
Apply the ie conditional class to whatever you need.
<div class="floatedDiv ie8"
CSS
.ie8 { margin:0px; }
I can't debug on ie8 but I searched and found that there is in fact a negative margin bug on ie7/8.
They recommend using
zoom:1, position: relative
as a workaround.
<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;
Changing the font size with CSS is just not working in IE9. The font will change but the font size will not.
It works perfectly in chrome and firefox.
I tried to use em,pt instead of px. i tried font-size:40px. i tried everything.
The font size will just not change.
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<meta charset="utf-8">
<style type="text/css">
body{
font: 40px Arial;
}
</style>
</head>
<body>
font size test
</body>
</html>
I think your CSS is overridden with you browser settings. Check the accessibility settings of the browser.
body {
font-size: 40px;
font-family: Arial;
}
If you have tested this with the exact document you posted, then apparently your IE 9 is broken. Re-install it. Otherwise, please post a complete example code or a URL that demonstrates the problem.
Make sure your zoom in IE9 is set to 100%. To do this, Hit CTRL + 0 while in the browser.
Make another CSS definition is not overriding your font-size statement. You can even force the font size by using the !important attribute like this:
body {
font-size: 40px !important;
}
Make sure you are clearing your cache when you refresh the page. To do a cache-free reload of a page, Hit CTRL + F5 in your browser. This will flush the cache and reload the page completely.
As far as the code you posted, I copy/pasted it as is and it works as intended in IE9. You may want to reinstall IE on your computer if you still can't get it working.
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>
I want to fit my website in IE .I want to know how i give the name of css selector in IE like firefox.Please help me!
i did'nt undersatnd your question "name of css selector in IE",but if you have to assign the css on selector p use like (<p>hello everyone</p>) this
p {
border:1px solid red;
font-size:24px;
}
always call your ie css file AFTER any other css so it overwrites any previous methods.
if you're still having problems, you can force a css definition to take priority with !important.
Without important, the div background would be blue, because that's the last declaration made
#mydiv{
background-color:green;
}
#mydiv{
background-color:blue;
}
now, using !important, you can force priority. the background will be green regardless of the order of declaration:
#mydiv{
background-color:green !important;
}
#mydiv{
background-color:blue;
}
if you're looking for css hacks for IE (not recommended, though sometimes essential), you can get more information from this excellent article.
hope this helps!
There is nothing wrong with the CSS code that you have shown so far, so repeating it in a style sheet specific for IE will not make any difference at all.
Generally you don't need a separate style sheet for IE. There are some rendering bugs in IE that you may have to circumvent, but that can almost always be done by tweaking the current CSS and HTML.
To find out what you need to do to make it work in IE, you should try to find the reasons for the differences. Most CSS is exactly the same, so if you don't see the effect in the page it's usually because the element is not where you think it is or doesn't have the size that you think it has. If for example the height of an element is zero, you will obviously not see it's background color.
First make sure that the page has a proper doctype, so that it doesn't render in quirks mode. This is important to make it work as close to the standards as possible in IE.
Open the error console in Firefox and view the page. It will tell you if you have any errors in the CSS code. There are standards for how to render correct code, but there is no standards for how to handle incorrect code, so if you have any errors you will get widely different results between browsers.
The plugin FireBug in Firefox is useful for seeing exactly which styles affect each element in the page, and you can even edit the CSS and see the result immediately. There is a similar tool built into IE 8 called Developer Tools. For IE 7 you can install Developer Toolbar that gives you some of this functionality. Each tool will allow you to select an element in the code and shows you exactly where it is on the page.
To fix your website in firefox and IE you can use the below methods.
Method 1:
You can use the "if condition" that you have used. You need to mention the version of IE in the if statement. See the code below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Browser Detection Example</title>
<style type="text/css">
body{ background:blue}
</style>
<!--[if IE 6]> <!-- for ie 6 browser -->
<style type="text/css">
body{ background:red}
</style>
<![endif]-->
<!--[if IE 7]> <!-- for ie 7 browser -->
<style type="text/css">
body{ background:red}
</style>
<![endif]-->
</head>
<body>
</body>
</html>
Method 2:
You can use the css hack inside the css code itself. No need to use a separate css file. You can code in the same css. See the example below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{ background:blue; _background:orange;}
</style>
</head>
<body>
</body>
</html>
Note : prefix "_" before the css code it will get render in ie6...
Check out !!!
regards,
Logesh Paul