SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    media queries specificity issues

    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):

    Code CSS:
    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,331
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    How do you know it's not being applied? It's a pretty small difference, and there may be rounding involved.

  3. #3
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,118
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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.
    http://www.sitepoint.com/forums/show...spond-to-block

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •