I was looking to add CSS media query workaround for ie8 in my code..
I came across css3-mediaqueries.js
http://code.google.com/p/css3-mediaqueries-js/
But could not find details or example of how to implement it in my site.
Could you please provide any example for the same.
On the site it says "Usage: just include the script in your pages." and has a few more rules on how its used. It appears to only work for media queries that are inside the style sheet and not media query attributes and won't work with #imported CSS files.
UPDATE
Based on our conversation, the goal is to serve up one stylesheet for the desktop and another for tablets. The natural solution is to do the following:
<link media="screen and (max-width: x)" href="tablet.css">
<link media="screen and (min-width: x)" href="desktop.css">
The problem is that IE6, 7, and 8 will apply both stylesheets. Fortunately, we know for a fact that IE6, 7, and 8 will never be on tablets (or at least not tablets in the modern sense), so we can use Internet Explorer Conditional Comments to prevent these versions of IE from seeing the tablet CSS. Here is an example using downlevel-revealed conditional comments:
<![if gte IE 9]>
<!-- This code is visible to IE9 and above and all non-IE browsers. -->
<link media="screen and (max-width: x)" href="tablet.css">
<![endif]>
<link media="screen and (min-width: x)" href="desktop.css">
For any non-IE browser, <![if gte IE 9]> is a nonsense tag which is ignored. For IE browsers, they do a logical check: if(version >= 9) use content. IE 6, 7, and 8 will therefor ignore the tablet css and only see <link href="desktop.css">. You could alternatively use the more verbose:
<![if gte IE 9]>
<!-- This code is visible to IE9 and above and all non-IE browsers. -->
<link media="screen and (max-width: x)" href="tablet.css">
<link media="screen and (min-width: x)" href="desktop.css">
<![endif]>
<!--[if lt IE 9]>
<!-- This code is only visible to IE8 and below. -->
<link href="desktop.css">
<![endif]-->
Skeleton is a great library for creating sites using media queries, the skeleton site itself is one giant example.
You just need to include the script anywhere in your page, the library will do the rest. Quote from the project homepage:
Usage: just include the script in your pages.
Always helps to read the whole page!
Related
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.
I know that for targeting IE8+ you should use:
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
For targeting non IE browsers you can use:
<!--[if !IE]> -->
According to the conditional comment this is not IE<br />
<!-- <![endif]-->
You can also combine conditions like this:
[if (IE 6)|(IE 7)]
But my problem, now that I want to target IE8+ or non IE browsers, I try to target them like this:
<!--[if (!IE)|(gte IE 8)]> -->
This should be non IE or IE8+ browsers
<!-- <![endif]-->
This seems to work for non ie browsers but add --> to IE.
I'm guessing it has something to do with the types of comments downlevel revealed, and downlevel hidden, but I'm not sure how to handle them.
From: link
The next example is the opposite: "Only show this content if the
browser is NOT Internet Explorer".
<![if !IE]>
Place content here to target all users not using Internet Explorer.
<![endif]>
Conditional comments are only recognized by Internet Explorer — other browsers treat them as normal comments and ignore them. Note that in the second example above (the one that targets "other" browsers), the content is not actually inside a comment — that's why other browsers display it.
So I think that you can not combine two different types of conditional comments
This is what works for me. I ended up having to include the non-IE-8 css twice:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="/css/ie8.css"/>
<![endif]-->
<!--[if gte IE 9]>
<link rel="stylesheet" type="text/css" href="/css/non_ie8.css"/>
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="/css/non_ie8.css"/>
<!--<![endif]-->
See:
http://msdn.microsoft.com/en-us/library/ms537512.ASPX
http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Of course, this causes a performance hit, and makes the code harder to maintain. It does, however, work (at least on the browsers I've tried).
You might consider a good css library, if you can find one that meets your needs.
I' ve website HTML5, Css3 and Jquery, it is look fine in IE9, but not look good in IE8
I read all solutions here, plus using all methods
Such as
CSS3 PIE
ie7-js
-
<link rel="stylesheet" href="normal.css" type="text/css" />
<!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="ie8.css"><![endif]-->
<!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="ie7.css"><![endif]-->
-
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script><![endif]-->
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('hgroup');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
and.... and....
i can't find the best way to appear website fine in IE8
any help Plz.
website: moic-egypt.com
I won't recommend css3pie, it causes several side effects.
For the styling issue with html5 elements, you're correctly using a shim/shiv (like html5shiv), so you don't need the document.createElement part. That will solve most of the issues.
Instead of creating custom CSS stylesheets for IE, i would switch to conditional comments, so that you can add specific ie rules in the main CSS:
.ie #specificdiv { /* custom rule for ie */ }
When your project gets bigger you won't have to browse all the different sheets.
Then ie9.js, that's for css selectors (like :not) which weren't supported in older IE versions.
You've css3 properties left. For these, i'm afraid you'll have to search for fallbacks/polyfills one by one. Here are some beutiful resources to start with:
html5please
Can I use
List of cross-browser polyfills
<!--[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.