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
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?
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.
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.
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:
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.
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?
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 {
}
[...]
}
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:
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):
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!
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):
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!
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):
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…
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!
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):
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!