- Exclusive Author
- Has been a member for 2-3 years
- Israel
- Item was Featured
- Referred between 1 and 9 users
- Sold between 10 000 and 50 000 dollars
Hello, I am facing the strangest behaviour of IE. It never happened before and I have no any clue why does it happen this time. As usual, I wrote general CSS file (styles.css) and two files for smaller screens (small-device1024.css and small-device640.css).
Abruptly for me, IE9 reads small-device640.css ignoring main file styles.css and displays css version for mobiles. If I remove (I was experimenting trying to figure out what was going on) small-device640.css, IE9 starts to read small-device1024.css, once again ignoring the main css file. And naturally, if I remove both small screen files it starts to read the main file.
What does it mean, does anybody know? Did you face such behaviour and do you know to fix the problem?
In all my previous works it never happened, all was ok. I use always same order but may be I do something wrong? Herebeneath is a full code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="description" content ="place your well-thought description here. It is important!"/> <meta name="author" content="Virtuti-D" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> <link href="styles.css" rel="stylesheet" /> <link rel="stylesheet" media="only screen and (max-width: 1024px), only screen and (max-device-width: 1024px)" href="small-device1024.css" /> <link rel="stylesheet" media="only screen and (max-width: 640px), only screen and (max-device-width: 640px)" href="small-device640.css" /> <link href='http://fonts.googleapis.com/css?family=Varela' rel='stylesheet'/> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lt IE 7 ]> <html class="ie6"> < ![endif]--> <!--[if IE 7 ]> <html class="ie7"> < ![endif]--> <!--[if IE 8 ]> <html class="ie8"> < ![endif]--> <!--[if IE 9 ]> <html class="ie9"> < ![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <!--<![endif]--> <link rel="icon" href="favicon.png" /> <title>my title</title> </head>
Thank you in advance, if you can help me it would be great. Tanya
- Bought between 50 and 99 items
- Europe
- Exclusive Author
- Has been a member for 1-2 years
- Sold between 5 000 and 10 000 dollars
Have you tried to merge your CSS files into one?
- Microlancer Beta Tester
- Author had a Free File of the Month
- Has been a member for 3-4 years
- Item was Featured
- Author was Featured
- Austria
- Exclusive Author
- Referred between 200 and 499 users
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
This force the browser to use the chrome plugin which can handle media queries. Remove this line and see what happens.
BTW I recommend to leave this line in and find a different solution
- Microlancer Beta Tester
- Author had a Free File of the Month
- Has been a member for 3-4 years
- Item was Featured
- Author was Featured
- Austria
- Exclusive Author
- Referred between 200 and 499 users
And what is this doing inside the head tag?
<!--[if lt IE 7 ]> <html class="ie6"> < ![endif]--> <!--[if IE 7 ]> <html class="ie7"> < ![endif]--> <!--[if IE 8 ]> <html class="ie8"> < ![endif]--> <!--[if IE 9 ]> <html class="ie9"> < ![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <!--<![endif]-->
- Exclusive Author
- Has been a member for 2-3 years
- Israel
- Item was Featured
- Referred between 1 and 9 users
- Sold between 10 000 and 50 000 dollars
Pixelous said
Have you tried to merge your CSS files into one?
Hmm, how can it be done? Two additional files rewrite the rules from the main one and target small screens only. I used to make always separate files for various screen resolutions. Is there other way?
- Exclusive Author
- Has been a member for 2-3 years
- Israel
- Item was Featured
- Referred between 1 and 9 users
- Sold between 10 000 and 50 000 dollars
revaxarts said
And what is this doing inside theheadtag?<!--[if lt IE 7 ]> <html class="ie6"> < ![endif]--> <!--[if IE 7 ]> <html class="ie7"> < ![endif]--> <!--[if IE 8 ]> <html class="ie8"> < ![endif]--> <!--[if IE 9 ]> <html class="ie9"> < ![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <!--<![endif]-->
It targets IE8 which to my surprise works as I intended, I shall probably omit ie7 and shall add some fixes for IE9 later, now I am worried about IE9 behaviour I described above. This piece of code does not affect anything, the problem I described had occurred yet before I added these statements.
- Exclusive Author
- Has been a member for 2-3 years
- Israel
- Item was Featured
- Referred between 1 and 9 users
- Sold between 10 000 and 50 000 dollars
revaxarts said
I guess this is because of this line<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">This force the browser to use the chrome plugin which can handle media queries. Remove this line and see what happens.
BTW I recommend to leave this line in and find a different solution
Tried, does not help, alas. Thank you though for advice!
- Most Wanted Bounty Winner
- Sold between 250 000 and 1 000 000 dollars
- Has been a member for 5-6 years
- Repeatedly Helped protect Envato Marketplaces against copyright violations
- Won a Competition
- Bought between 100 and 499 items
- Exclusive Author
- Referred between 200 and 499 users
virtuti saidThis should be right at the beginning, and the real html element should be between a later IE filter.
revaxarts saidIt targets IE8 which to my surprise works as I intended, I shall probably omit ie7 and shall add some fixes for IE9 later, now I am worried about IE9 behaviour I described above. This piece of code does not affect anything, the problem I described had occurred yet before I added these statements.
And what is this doing inside theheadtag?<!--[if lt IE 7 ]> <html class="ie6"> < ![endif]--> <!--[if IE 7 ]> <html class="ie7"> < ![endif]--> <!--[if IE 8 ]> <html class="ie8"> < ![endif]--> <!--[if IE 9 ]> <html class="ie9"> < ![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <!--<![endif]-->
About merging .. if you put all your queries at the bottom of your stylesheet you will still overwrite the rules.
- Bought between 50 and 99 items
- Europe
- Exclusive Author
- Has been a member for 1-2 years
- Sold between 5 000 and 10 000 dollars
virtuti said
Pixelous saidHmm, how can it be done? Two additional files rewrite the rules from the main one and target small screens only. I used to make always separate files for various screen resolutions. Is there other way?
Have you tried to merge your CSS files into one?
I think to merge files in a one maybe will be more effective coz there will be a fewer requests. Instead of this:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
try this:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
- Exclusive Author
- Has been a member for 2-3 years
- Israel
- Item was Featured
- Referred between 1 and 9 users
- Sold between 10 000 and 50 000 dollars
Pixelous said
virtuti said
Pixelous saidHmm, how can it be done? Two additional files rewrite the rules from the main one and target small screens only. I used to make always separate files for various screen resolutions. Is there other way?
Have you tried to merge your CSS files into one?I think to merge files in a one maybe will be more effective coz there will be a fewer requests. Instead of this:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">try this:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
Aha, great, thank you! I shall try. To be honest I do not know well all about X-UA-Compatible, I need to learn it more properly, but for the moment I shall try your advice, maybe it will help.
Request processing...