CSS Media Tags Safari Chrome Firefox

[sukhman21]

I am trying to implement a responsive design to my website for mobile devices, and have been tweaking the media tags to get my desired result.I have been testing in firefox and everything works perfectly, however I decided to test in Safari and Chrome and for some reason the media tags below eachother are inheriting styles, until it reaches 480px on max-width.I am using http://mattkersley.com/responsive/ to test my website if that makes a difference, and no I will not provide my website or any HTML/CSS code because it is irrelevant.Here is the media css I have so far\[code\] @media all and (min-width: 1024px) { //Works fine in all 3 } @media all and (max-width: 1200px){ //Works Fine } @media all and (max-width: 1024px) { // 1024x768 is using this section in Chrome/Safari and not Firefox } @media all and (max-width: 480px){ //480x640 Is using this section in Chrome/Safari and not in Firefox @media all and (max-width: 320px){ //Works fine in all 3 browsers }\[/code\]