Why won't my image display: none?

[cheli]

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:

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

@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?

[ronpat]

Hi, cheli,

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

[cheli]

Weird, it's not working for me in Chrome.

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

[Paul O'B]

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.

.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.

[cheli]

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:

			.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