IE9 suddenly reads media query for small screens. Any ideas how to fix?


#1

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:











	
		






 

my title

Thank you in advance, if you can help me it would be great.
Tanya


#2

Have you tried to merge your CSS files into one?


#3

I guess this is because of this line


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


#4

And what is this doing inside the head tag?





 

#5
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?


#6
revaxarts said

And what is this doing inside the head tag?





 

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.


#7
revaxarts said

I guess this is because of this line


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!


#8
virtuti said
revaxarts said

And what is this doing inside the head tag?





 

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.

This should be right at the beginning, and the real html element should be between a later IE filter.

About merging … if you put all your queries at the bottom of your stylesheet you will still overwrite the rules.


#9
virtuti said
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?

I think to merge files in a one maybe will be more effective coz there will be a fewer requests. Instead of this:


try this:



#10
Pixelous said
virtuti said
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?

I think to merge files in a one maybe will be more effective coz there will be a fewer requests. Instead of this:


try this:


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.


#11
RubenBristian said
virtuti said
revaxarts said

And what is this doing inside the head tag?





 

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.

This should be right at the beginning, and the real html element should be between a later IE filter.

About merging … if you put all your queries at the bottom of your stylesheet you will still overwrite the rules.

Thank you Ruben, I shall try it, I understand what you mean, though for ie8 it works as it now, does not matter, this is not my concern for now.

As for merging, how exactly do I add the query at the bottom? I never did it, only was writing separate files. Could you tell me?


#12
virtuti said
RubenBristian said
virtuti said
revaxarts said

And what is this doing inside the head tag?





 

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.

This should be right at the beginning, and the real html element should be between a later IE filter.

About merging … if you put all your queries at the bottom of your stylesheet you will still overwrite the rules.

Thank you Ruben, I shall try it, though for ie8 it works as it now, does not matter, this is not my concern for now.

As for merging, how exactly do I add the query at the bottom? I never did it, only was writing separate files. Could you tell me?

I'm sorry if i'm missing something, but you simply have to copy the contents of one stylesheet at the bottom of the other. For example:
[..]

}

@media only screen and (max-width: 1024px) {
   
   #customIdHere {

    }

    [...]

}

#13
virtuti said
RubenBristian said
virtuti said
revaxarts said

And what is this doing inside the head tag?





 

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.

This should be right at the beginning, and the real html element should be between a later IE filter.

About merging … if you put all your queries at the bottom of your stylesheet you will still overwrite the rules.

Thank you Ruben, I shall try it, I understand what you mean, though for ie8 it works as it now, does not matter, this is not my concern for now.

As for merging, how exactly do I add the query at the bottom? I never did it, only was writing separate files. Could you tell me?

Just copy all the css rules from your secondary css files and paste them to your main css file at the header and then say does this help? And try to delete this:





 

And try paste this:



#14
Pixelous said

Just copy all the css rules from your secondary css files and paste them to your main css file at the header and then say does this help? And try to delete this:

So, I need to do it this way (in main stylesheet):

.strip{
float:left;
width:70%;
margin:4% 15%;
clear:both;
}
@media screen and (max-width: 640px) {
.strip{
width:90%;
margin:10% 5%;
}
}

right? Sorry for bothering you with simple questions, simply used to write separate files and never knew troubles with IE9, abruptly it began to behave weirdly. Thank you!


#15
virtuti said
Pixelous said

Just copy all the css rules from your secondary css files and paste them to your main css file at the header and then say does this help? And try to delete this:

So, I need to do it this way (in main stylesheet):

.strip{
float:left;
width:70%;
margin:4% 15%;
clear:both;
}
@media screen and (max-width: 640px) {
.strip{
width:90%;
margin:10% 5%;
}
}

right? Sorry for bothering you with simple questions, simply used to write separate files and never knew troubles with IE9, abruptly it began to behave weirdly. Thank you!

Yep, right, so is it work now?


#16
Pixelous said
virtuti said
Pixelous said

Just copy all the css rules from your secondary css files and paste them to your main css file at the header and then say does this help? And try to delete this:

So, I need to do it this way (in main stylesheet):

.strip{
float:left;
width:70%;
margin:4% 15%;
clear:both;
}
@media screen and (max-width: 640px) {
.strip{
width:90%;
margin:10% 5%;
}
}

right? Sorry for bothering you with simple questions, simply used to write separate files and never knew troubles with IE9, abruptly it began to behave weirdly. Thank you!

Yep, right, so is it work now?

Thank you, not ready yet, now I need to rewrite everything, just wanted to ensure that this is the right way to adding queries to main style. Going to work on it, and I detected a new trouble–the method with ie8 class () makes ie9 to display nothing, yet better outcome, what to say:)))! Now I need also to remove it from main stylesheet and probably write a separate file for ie8, uphhh…


#17

Well, to explain it other than by interference from the beyond I cannot.
I put aside the project for a while and the only thing I changed was:


instead of:

< ![endif]->

what actually was not related to the problem I was worried about. I left two separate files for small devices as they were (since I had no time to move rules to main file) and checked tonight–just out of curiosity–IE9 once again. All became normal. IE9 reads main file as it is supposed to be and iPhone reads small css file as it is supposed to be.

Big thanks to all people who tried to help me for your time and effort!


#18
Pixelous said
virtuti said
Pixelous said

Just copy all the css rules from your secondary css files and paste them to your main css file at the header and then say does this help? And try to delete this:

+1000000
So, I need to do it this way (in main stylesheet):

.strip{
float:left;
width:70%;
margin:4% 15%;
clear:both;
}
@media screen and (max-width: 640px) {
.strip{
width:90%;
margin:10% 5%;
}
}

right? Sorry for bothering you with simple questions, simply used to write separate files and never knew troubles with IE9, abruptly it began to behave weirdly. Thank you!

Yep, right, so is it work now?