SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Why won't my image display: none?

    Hey all, this is hopefully a quick one and likely to be a typo, but I can't see where the error is myself and I'm hoping some fresh eyes will help pick it out!

    I've got an image:
    Code:
    <img class="hideable" src="http://placehold.it/369x42" alt="" title="mastheadimages" style="max-width:369px; max-height:42px; margin-bottom:0px;">
    And I've applied this style to it:
    Code:
    @media only screen and (max-width: 480px) {
    img[class=hideable]{
    	display:none;
    	}
    }
    ...which should make the image disappear when the screen is less than 480px wide. Except it isn't. I've applied this successfully to other images on the same page so I figure I've either got a typo somewhere that I'm missing, or there's something particular about the context of this image tag that's affecting it's ability to display: none.

    Thoughts?

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,527
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Hi, cheli,

    It works for me in IE9, FF, Chrome, and Opera. Doesn't work in IE8.

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Weird, it's not working for me in Chrome.

    Perhaps it is the context around the image tag after all.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,372
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    As Ron said the code above works fine so you may have a specificity issue somewhere. For example if you have more weight to a previous rule then the media query will be over-ruled. e.g.
    Code:
    .test .hideable { display:block }
    Or you may just have a typo in your stylesheet causing a rule (or set of rules) to be ignored. A stray bracket can cause this so validate the html and css and find any typos first.

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reminder to validate the code, @Paul O'B. I've validated it via W3C and made the changes it suggested to no effect. I then checked my styling and noticed this:
    Code:
    			.masthead img{
    				display: inline-block;
    			}
    Until you reminded me I hadn't clicked that applying the styling above would override my media query. Thanks for the lesson on inheritance. I really appreciate your help and this should teach me how to check for inheritance better in the future


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
  •