Why is my CSS media query being ignored or overridden?

Question

This is driving me insane! I've looked at a few questions on Stackoverflow and see that an ID element has priority over a class element (which is good to know but I have a feeling this isn't my problem). It's my NAVIGATION menu that I'm struggling with. (I use max-width btw)

Here is the GENERAL CSS for my NAV:

nav{ float:right; margin-left:2%;}
nav ul{ float:left; list-style:none; width:100%;}
nav ul li{ float:left; margin-left:5px; }
nav a{ display:inline-block; float:left; color:#f0f0f0; text-transform:uppercase; 
font-family:TrumpGothicWestRegular; font-size:1.5em; padding: 100px 20px 20px 20px; }

Now when the Viewport is UNDER 1140px, I want the CSS to change the menu like so:

nav ul li{ float:left;}
nav a{ float:left; display:inline-block; padding: 20px 20px 20px 20px;}

So basically the menu will float left with less top padding.

When the Viewport is UNDER 800px, I want the CSS to change the menu like so:

nav ul li{ float:none;}
nav a{ float:none; padding: 20px 20px 20px 20px;}

As you can see I've I only changed the NAV Float to NONE

Now when I test it, the GENERAL CSS works fine as well as when the view port under 1140px, but as soon as I go under 800px, the NAV still floats to the left!!?? It seems to be inheriting the CSS media query of 1140px? Any ideas?

UPDATE: This is how I am defining my media queries

<link rel="stylesheet" media="only screen and (max-width: 800px), only screen and 
(max-device-width: 800px)" href="small-device800.css" />
<link rel="stylesheet" media="only screen and (max-width: 1140px), only screen and 
(max-device-width: 1140px)" href="small-device1140.css" />  

Solution 1

Maybe there is something not right with your media queries? Try something like this:

@media all and (min-width: 1140px) {
    nav ul li { float:left; }
}

@media all and (max-width: 1139px) and (min-width: 800px) {
    nav ul li { float:left; }
}

@media all and (max-width: 799px) {
    nav ul li { }
}

Solution 2

I had a similar problem, I placed all my @media queries into a seperate stylesheet called 'responsive', and it wal all working fine until I started importing the new responsive CSS and elements into my existing website.

I had to start adding !important to just about every line of CSS contained within the @media query. I then change the loading order of my CSS files, and moved the one called 'responsive' down the list to be the last one loaded, and then everything started to work fine and I no longer needed to use the !important statement after the lines of CSS.

Solution 3

Here is the jsFiddle for your test cases.. http://jsfiddle.net/RJm3c/1/

http://jsfiddle.net/RJm3c/1/embedded/result/ <-- resize your browser to see the result

css:

  nav{ float:right; margin-left:2%;}
  nav ul{ float:left; list-style:none; width:100%;}
  nav ul li{ float:left; margin-left:5px; }
  nav a{ display:inline-block; float:left; text-transform:uppercase;}
  /*for test only*/
  body{ background-color: green}

  @media only screen and (max-width: 1140px), only screen and (max-device-width: 1140px) {
    nav ul li{ float:none;}
    nav a{ float:none; padding: 20px 20px 20px 20px;}
    /*for test only*/
    body{ background-color: red}
  }

  @media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
    nav ul li{ float:left;}
    nav a{ float:left; display:inline-block; padding: 20px 20px 20px 20px;}
    /*for test only*/
    body{ background-color: blue}
  }

​