[css-d] CSS Not Being Applied Based on Source of Image

[Christopher Akins]

Happy New Year Everyone! -

It's been a long time since I've posted to this list, but I have something
that has me stumped.

2014 has started with a strange issue I'm seeing on our new Wordpress-based
video site.  This is my first foray into the WP world, so I'm still getting
used to where things are tweaked, customized, etc.  But it's pretty
straightforward, so this issue has me befuddled.

Videos in the WP site get pulled in from Vimeo - each as separate posts.
 Until we can get a plug-in working, the posts are being created manually.
 This is important - and I'll come back to it in a sec.

I noticed a few of the thumbnails for the videos are showing up larger than
the rest, but ONLY on my iPad or iPhone.  On the desktop, they are all the
same size.  Of note, I tweaked the CSS defining the thumbnail size because
the theme uses a 4:3 ratio for these small images, but our videos are 16:9.
The tweaks were made in the "custom.css" file in our WP theme.  That bit of
custom CSS is below:

#archive img.Thumbnail {height:128px; border-radius: 5px; box-shadow: 4px
4px 5px #bfbfbf;}

I find no reference to the .Thumbnail class in the main "style.css" file
for our WP theme either. This, too, is odd.  Perhaps a php file is
generating the CSS?  I don't know PHP, but I would assume this is possible?

The ONLY difference in the source code for a thumbnail that is the
incorrect, larger size, is the src path of the thumbnail image itself is
being pulled from within the WP database vs. from Vimeo.  This is because
there is an option to set a "featured image" for each post as the author is
creating the post.  Most of the posts did NOT have a featured image set,
rather they just pull in whatever thumbnail is set in Vimeo.  But for the
few that had featured images set within WP, an image gets uploaded into the
WP system, and those images are the ones that, for some reason, are not
obeying the CSS.  Here's the weird part, though.  The CSS for these
thumbnails and all other containing tags are identical for all the posts!
 I have never seen a situation where the CSS is only applied to an image
from one source, but not another source.  And, again this only appears
different on a mobile device.

Does anyone have any ideas as to how that could happen?  Obviously, we need
to be able to set the featured image within WP for page load reasons, but
it sure seems like the CSS should apply regardless of what an image's src
path is.

The code for two entries is below.  The first image in the first <li> is
NOT obeying the CSS rule, the second is obeying it.

•••••

<li>


  <div class="cover"><a href="
http://cityview.springfieldmo.gov/airport-board-december-19-2013/";
title="Airport Board – December 19, 2013"><img src="
http://cityview.springfieldmo.gov/wp-content/uploads/2013/12/458670154_295-228x160.jpg";
alt="Airport Board – December 19, 2013" class="Thumbnail thumbnail "
width="228" height="160"></a></div>

<div class="postcontent">

some text stuff that is similar in both entries


</div>

</li>



<li>


  <div class="cover"><a href="
http://cityview.springfieldmo.gov/tuesdays-with-council-december-17-2013/";
title="Tuesdays with Council – December 17, 2013"><img src="
http://b.vimeocdn.com/ts/458/411/458411625_295.jpg"; alt="Tuesdays with
Council – December 17, 2013" class="Thumbnail thumbnail " width="228"
height="160"></a></div>

<div class="postcontent">

some text stuff that is similar in both entries


</div>
</li>


•••••

Thanks for any insight into this strange one.  :-)

Christopher Akins
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/