Media queries specificity issues

HTML & CSS
1

Hello all,

I’m not getting media queries specificity.
This is localhost only so I can’t provide any links at the moment, I’m sorry for that. Anyway, perhaps you can figure out the logic issue I’m facing here.

By taking the following CSS lines (the order is exactly this one):

header, 
#main-content,
#main-content-bottom,
footer {
       margin: 0 auto;
       overflow:hidden;
       width: 70%;
}

#main-menu ul {
   overflow: hidden;
   text-align: right;
   border-radius: 5px;
   background-color: #333;
   float:right;
   width: 75.5%;
}

/*************************
1024
*************************/
@media screen and (max-width: 1024px) { 
   header, 
   #main-content,
   #main-content-bottom,
   footer {
       width: 90%;
   }

   #main-menu ul { 
       width: 76.7%;  /* <-- doesn't get assumed why ??*/
	background-color: red;
   }
}

So, on this 1024 I have two rules. One that sets width to 90% on some elements. And the other that set’s the menu width to 76.7% and change it’s background to red.

The problem is:
When we test it on a 1024 monitor, we GET the width 90% rule applied, and the background turn red on #main-menu ul BUT we DON’T GET the width: 76,7% applied. (instead the 75.5%) is assumed.

What am I not getting here ?

Thanks in advance,
oikram

2

How do you know it’s not being applied? It’s a pretty small difference, and there may be rounding involved.

3

You were right. It was indeed been applied but not understandable. Plus, the IE8 dev toolbar had the value of 75.5 checked, when I check it. I guess I can’t rely on IE 8 dev toolbar that much.

Again, thank you very much.
Oikram

4

For what it’s worth I don’t have specificity issues anymore with media queries as I’m adding them inline directly after the other styles so they are always more specific.

Alternatively you can just !important things in media queries which you always want to be overriding.