On Aug 14th 11 PM ET/Aug 15th 03:00 UTC, due to scheduled Firefox Account server maintenance, users may not be able to sign in or create a new subscription. This is expected to last approximately 30 minutes. Status updates can be found at https://status.vpn.mozilla.org or https://status.relay.firefox.com.

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

Lolu chungechunge lwabekwa kunqolobane. Uyacelwa ubuze umbuzo omusha uma udinga usizo.

Firefox 9 support of css3 media queries

  • 6 uphendule
  • 2 zinale nkinga
  • 29 views
  • Igcine ukuphendulwa ngu 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>

Okulungisiwe ngu cor-el

Isisombululo esikhethiwe

I finally had to just use this to make media queries work correctly in FF9:

http://code.google.com/p/css3-mediaqueries-js/

Funda le mpendulo ngokuhambisana nalesi sihloko 👍 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

Isisombululo Esikhethiwe

I finally had to just use this to make media queries work correctly in FF9:

http://code.google.com/p/css3-mediaqueries-js/