Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Firefox 9 support of css3 media queries

  • 6 replies
  • 2 have this problem
  • 23 views
  • Last reply by tslatt

more options

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
}
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.<br /> <br /> <pre><nowiki>@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 }</nowiki></pre>

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 👍 0

All Replies (6)

more options

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.

more options

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?

more options

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.

more options

Do you have a test page?

Did you check the Error Console for errors relating this problem?

more options

There are no errors in the error console.

more options

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/