Firefox 9 support of css3 media queries
Firefox 9 is behaving differently than earlier versions when it comes to css3 media queries. Is there any way to get it to behave properly?
I use different style settings based on the width. FF9 ignores the changes in width and just displays the maximum width css. Older versions would use different settings based on how wide the browser currenly was.
@media only screen and (max-width: 320px) {
...my styles here
}
@media only screen and (min-width: 321px) and (max-width: 480px) {
...my styles here
}
@media only screen and (min-width: 481px) and (max-width: 700px) {
...my styles here
}
@media only screen and (min-width: 701px) and (max-width: 960px) {
...my styles here
}
@media only screen and (min-width: 961px) {
...my styles here
}Modified by cor-el
Chosen solution
I finally had to just use this to make media queries work correctly in FF9:
http://code.google.com/p/css3-mediaqueries-js/
Read this answer in context 👍 0All Replies (6)
A good place to ask advice about web development is at the MozillaZine "Web Development/Standards Evangelism" forum.
The helpers at that forum are more knowledgeable about web development issues.
You need to register at the MozillaZine forum site in order to post at that forum.
On my Vista computer these media queries are working fine. Did you try to run in Safe Mode to see if this is caused by an add-on on your computer?
I have tried it on two separate Windows 7 machines running Firefox 9.0.1. Disabling add-ons had no effect. The media queries work fine in all other browsers on the same machines. The styles in the media queries cause the site to display differently based on how wide the browser is, but in FF9, there is no change when the browser changes width.
Do you have a test page?
Did you check the Error Console for errors relating this problem?
There are no errors in the error console.
Chosen Solution
I finally had to just use this to make media queries work correctly in FF9: