For iPad and other devices I disabled the scrolling of background images, because of performance problems. All works fine.
How can I disable scrolling for IE10 and IE10 mobile (Tablet)?
Use conditional commenting in your HTML file.
If the browser agent is/is not equal to IE10 then include/exclude a CSS File
<head>
<![if !IE]>
<link rel="stylesheet" type="text/css" href="nonIE.css" />
<![endif]>
[if IE]>
<link rel="stylesheet" type="text/css" href="IE.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="shared.css" />
</head>
Then within each browser specific css file, you can enable any features as required.
Or use a "display:none;" on an css element, to completely hide it from a browser within your conditional css.
Note: Conditional comments are an IE-only feature, other browsers treat them as ordinary HTML tags.
The above snippet borrowed from here: http://codebox.org.uk/pages/articles/conditional-comments and the article goes in to much more detail than I have. It's a good little read.
Related
I'm using bootstrap 3 and have to support ie7. Ideally I would like to use font for icons. They work great in all other browsers except ie7 :(
The icons appear fine using ie on the font awesome website - I have had a look at what's different and I cant see anything out of th ordinary. I've followed the instructions and added the css in order etc...
I'm not using less. Here is a link to my test site https://googledrive.com/host/0B8UWGEiox1HOZnV6ZTA3bzNvMTA/testsite.html
The test site show font awesome using ie tester however that isnt 100% accurate. I am using true ie7 to test on and the font is simply squares.
Please can anybody see what's going on here as I'm at an end with it!
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/main.css" rel="stylesheet" media="screen">
<!--[if lt IE 8]>
<link href="css/main-ie7.css" rel="stylesheet">
<![endif]-->
<link rel="stylesheet" href="css/font-awesome.css" />
<!--[if IE 7]>
<link rel="stylesheet" href="css/font-awesome-ie7.min.css" />
<![endif]-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
Font Awesome version 4.0.1 does not support IE7, see the bottom of their getting started page: http://fortawesome.github.io/Font-Awesome/get-started/
Version 3.2.1 has support, see their IE7 section at the bottom of their 3.2.1 getting page
http://fortawesome.github.io/Font-Awesome/3.2.1/get-started/
There is an app called Icomoon that can create custom icon fonts, and can include icons from Font Awesome. Their old version of the application generates a Javascript file for IE7 that will allow the icon fonts to be used, the old version of the app is here http://icomoon.io/app-old/
Perhaps the charset is assumed wrongly. Try including <meta charset="utf-8"> in the <head>.
If your icons are not intented to change at runtime, you can use the following CSS to add support for IE6 and IE7 for whatever icons you need :
.icon-glass {
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '');
}
If your icons are intended to change at runtime, you could do something like this instead :
.icon-glass {
*top: expression(0, this.innerHTML = '');
}
Unfortunately, this second approach is extremely slow. While it is likely to work in IE6 with a significant reduction of your performance, IE7 is likely to crash if you have too many icons on your page. So I wouldn't recommend this second technique unless you use only very few icons and you can afford the performance reduction.
I am creating a website based from tumblr that seems to work fine on google chrome, but has a issue with the ad box that I have assigned to the right of the page.
I have searched google and found this related question, but the answer given does not work for me.
I have tried the following.
Just adding a html class="ie9" tag with the proper if statements.
Clearing my cache.
And checking the browser mode.
It seems to be just one element of the page. The right side does not show up correctly, but I fiddled with the customization in IE 9 and I have the exact margin reqs. However I can't seem to link the stylesheet.
Is this because I'm linking a static file in this manner?
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/texnbv5/j70mi1pbq/ie9.css" />
Does this have anything to do with the fact that I am linking this stysheet from a different domain instead of the hosted domain?
Also is there anyway I can just single out the line that needs to be adjusted?
Is it possible for me to place a if statement in the css portion of my site
<!--[if IE 9]<style>#Content-right{margin:-1000}</style>
<![endif]-->
it's not working because you didn't close your comment tag. It has nothing to do with cross-domain css file fetching, which is entirely legal.
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/texnbv5/j70mi1pbq/ie9.css" />
should be <!-- [if IE 9] -->
Also... what engine is supposed to be acting on this IF?
There is a very interesting article on just this topic. It addresses the need/desire to isolate browser specific CSS without having to create an entire CSS file. There are also a number of benefits to the approach. I have utilized it for a number of years due to my own needs and was unaware until recently that such analysis had been performed on the technique.
Here is the link: Conditional Stylesheets vs. CSS Hacks
Other Things of Note:
Positioning of your Stylesheets is very important in CSS. Since we can't see your other calls and you are using a separate stylesheet, it is important that you place the conditional statement under your standard stylesheet.
Example
<link rel="stylesheet" href="path/to/standard.css" />
<!--[if IE 9]-->
<link rel="stylesheet" href="http://path/to/ie9.css" />
<!--[endif]-->
This is because CSS uses the styles that were loaded last if there is a conflict. I only mention this because it could be affecting you results as it is a common mistake.
Try this code
<!--[if lt IE 9]>
<link rel="stylesheet" href="http://static.tumblr.com/texnbv5/j70mi1pbq/ie9.css" />
<![endif] -->
I hope you work it
I have a site http://test.printavo.com that renders terribly in IE8 but fine in IE7 and IE9. I'm not sure if IE8 has different standards for some reason but the main issue is that the text-shadow for 'Open Sans' Google font looks terrible...
Anyone have a fix for this? Maybe convert all fonts to Arial, I tried to text-shadow:none !important for IE but that didn't work (check out my source)
EDIT:
Is there a better way to take off all text-shadows in IE?
http://www.useragentman.com/blog/2011/06/29/full-css3-text-shadows-even-in-ie/
It would seem there are a variety of choices to choose from. The link above should give you some options. I should note they say IE8 can display text-shadow unpredictably and you should look the caveats section (link below) to try some fixes.
http://www.useragentman.com/blog/2011/04/23/css-blurred-text-shadow-in-ie-part-i/#caveats
EDIT:
In request to your browser specific css styling, you can target IE styling using conditional comments, just add this line to the >head< tags of your HTML file:
<!--[if IE 6]><link rel="stylesheet" href="http://mysite.com/path/to/ie6.css" type="text/css" media="screen, projection"><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="http://mysite.com/path/to/ie7.css" type="text/css" media="screen, projection"><![endif]-->
<!--[if IE 8]><link rel="stylesheet" href="http://mysite.com/path/to/ie8.css" type="text/css" media="screen, projection"><![endif]-->
<!--[if IE 9]><link rel="stylesheet" href="http://mysite.com/path/to/ie9.css" type="text/css" media="screen, projection"><![endif]-->
<!--[if gte IE 5]>
<link rel="stylesheet" type="text/css" href="iemaster.css" />
<![endif]-->
<![if !(IE 5)]>
<link rel="stylesheet" type="text/css" href="master.css" />
<![endif]>
to load a different stylesheets depending on whether or not it is IE. The problem is that i have button bar going across the top. In IE I need the padding at 0 and other wise i need it at 200px, but no matter what I do to the values, the bar in IE doesn't seem to change. It changes for chrome though. The only thing that seems to work is if I make the class affecting it a different name then the non-IE one. Of course this means my non-IE wouldn't load properly. Other then this the CSS seems to load perfectly. Why is this?
That's not how you should be doing it.
Nobody is using IE5, so forget about that.
Do it like this instead:
<link rel="stylesheet" type="text/css" href="master.css" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css" /><![endif]-->
Your master stylesheet will get loaded in every browser.
Are you sure you care about IE6? If so, put IE6 specific rules inside ie6.css.
Put IE7 specific rules inside ie7.css.
You shouldn't need a separate stylesheet at all for IE8 or IE9. Those browsers are compliant enough to handle the same stylesheet as the other browsers.
Your bottom block is not actually a comment (it doesn't begin with <!--) so all browsers will read the master stylesheet. Also, check your logic: IE6 is both greater than IE5 and != IE5, so the main stylesheet will get loaded for some versions of IE anyway.
If you reverse the order that you link to the stylesheets that should fix it. What's happening is the IE-specific style sheet is being set first, but the master.css is overwriting it after.
Also, I don't think you need <![if !(IE 5)]> and <![endif]> around the non-IE one.
I have a regular CSS file plus two IE specific CSS files. In Firebug in Firefox I noticed the same <div> is getting properties from the three files.
Why is Firefox loading iestyle.css & ie6style.css?
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="iestyle.css" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="ie6style.css" />
<![endif]-->
Addition
This should definitely be working. Are you sure there isn't an unclosed <!-- or <![CDATA[ hanging around in head?
I think that isn't all the relevant code. Do you perhaps #include those files somewhere else?
Are the conditional comments in the HEAD element or in the BODY element? I haven't tried it, but it's possible that FF only ignores conditional comments if they are in the HEAD element (where they should be).