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]-->
Related
I've created a mobile first responsive web page. It is working lovely in all the major browsers to my liking and is looking good on mobile phones and tablets too.
Last part is I want it to look decent in IE8.
I've read here on #3 (http://www.cognifide.com/blogs/mobile/responsibly-responsive-mobile-first-responsive-design-part-2/) you can simply serve a specific style sheet for IE9 and lower with the desktop version styles using conditional comments.
I created ie.css with my desktop styles and have added this conditional commenting to the head section however no luck, I still get the mobile styles in IE8 and lower.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.ico">
<title>Page Title</title>
<link rel="stylesheet" href="style.css" media="all">
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" href="ie.css" media="all">
<![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
Any ideas on whats going wrong? I've double checked that my ie.css file is sitting there in the directory right next to my index.html just like style.css. Is there some other reason this would not work?
Thanks,
if i read that correctly, you just want to target ie8?
first off, place html5shiv above all of your style sheets...unless you have style sheets that literally have no styles for ie. html5shiv needs be rendered first so it can tell ie those are elements and it needs to style them accordingly.
i'm still confused about what you want exactly, and not sure if you are targeting less than ie8, so lets just fix ie8 issue(s):
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="style.css" media="all">
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->
EDIT
<!--[if lt IE 8]>
<link rel="stylesheet" href="ie.css" media="all">
<![endif]-->
<![if !IEMobile]>
<link rel="stylesheet" href="ie.css" media="all">
<![endif]>
all we've done is move html5shim above all of the style sheets. then comes the style sheet for every other browser. then comes a style sheet only for ie8. then comes the style sheet for less than ie 8 and not ie mobile.
take note: i changed the version from less than 9 to less than 8, so there's no chance of cross-referencing each other, cancelling/adding styles to each other.
again, i'm not clear thats what you wanted, but this fixes the issues i see. lmk if i misunderstood something.
EDIT: looks like the mobile not (if !IEMobile) needs different syntax, so i'm assuming trying them separate will fix it. here's reference: http://blogs.msdn.com/b/iemobile/archive/2010/12/08/targeting-mobile-optimized-css-at-windows-phone-7.aspx
Use Respond.JS - a javascript polyfill to make css media queries work in IE8
You could have styles within your mobile stylesheet that aren't decalred within yout IE sheet. therefore they aren't getting overwritten. You could exclude the mobile stylesheet on non IE stylesheets.
<!--[if !(IE)]><!--> <link rel="stylesheet" href="style.css" media="all"> <!--<![endif]-->
<!--[if (lt IE 9)&(!IEMobile)]><link rel="stylesheet" href="ie.css" media="all"><![endif]-->
Hope it will help you, add some jQuery to remove your responsive stylesheet when web page load in a ie8 below versions, So add new style sheet for ie 8 and below versions
if (jQuery.browser.version >= 8.0) {
$('link[rel=stylesheet][href~="style.css"]').remove();
}
or if you need responsive for 1.e8 0r 7, make sure that you are added these meta tags and scripts below
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
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.
<!--[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 am having an issue wherein my web application behaves different in (IE5 & IE6) as compared with (IE7 & IE8)
There is some CSS Issue but I do not want to get in a situation where I make some changes in CSS File and web application would work fine in (IE5 & IE6) and not in (IE7 & IE8) and so my question is:
How should I approach problem to resolve CSS incompatibities or differences between different version of IE ?
Any guidance and suggestions would be highly appreciated.
Create a cascade of style sheets like so:
<link id="stylesheet1" rel="stylesheet" href="css/style.css" type="text/css" media="all" /
<!--[if IE]>
<link id="stylesheet2" rel="stylesheet" href="css/ie.css" type="text/css" media="all" />
<![endif]-->
<!--[if lte IE 6]>
<link id="stylesheet3" rel="stylesheet" href="css/ie6.css" type="text/css" media="all" />
<![endif]-->
<!--[if lte IE 5]>
<link id="stylesheet4" rel="stylesheet" href="css/ie5.css" type="text/css" media="all" />
<![endif]-->
style.css:
.myclass{
width:100px;
}
ie.css:
/* override class from style.css */
.myclass{
width:105px;
}
ie6.css:
/* override class again from ie.css */
.myclass{
width:110px;
}
ie5.css:
/* if necessary, override class again from ie6.css */
.myclass{
width:115px;
}
You only need to over-ride what needs to be over-ridden.
Pekka is right, you need to take each problem/bug/display-difference on a case-by-case basis. So if something isn't showing up right in IE6, you need to adjust it in ie6.css. If even after that, it's not showing up right in IE5, you need to adjust it in ie5.css.
If you practice a little, you will understand better.
Explanation:
<!--[if IE]>
only Internet Explorer browsers (all versions) will see HTML between these statements
<![endif]-->
<!--[if lte IE 6]>
only Internet Explorer 6 or lower browsers will see HTML between these statements
<![endif]-->
<!--[if lte IE 5]>
only Internet Explorer 5 or lower browsers will see HTML between these statements
<![endif]-->
Use conditional comments. Put IE version specific css in specific files only included for the particular version in question.
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).