Inline style override help needed

need to make image smaller than wp plugin dictates

[ericjt]

I hope you can help with this. There are several layers of divs, classes, etc here and I'm not getting anywhere.

I am trying to overide the size limit in the code below to make the image smaller. It's set as it is by a wordpress plugin and I can't change the size for this page without changing it on another that I need to stay as the plugin dictates. I want it 150 px here and the default 200px there.

The page code looks like this:

 
<div id="wpbdp-view-listings-page" class="wpbdp-view-listings-page wpbdp-page">
<div class="wpbdp-page-content">
<div class="listings">
<div id="wpbdp-listing-17" class="wpbdp-listing excerpt wpbdp-listing-excerpt normal even cf">
<div class="listing-thumbnail"><a href="http://websitenamehere.com/testcart/calendar-of-events/17/dancealot/"><img class="wpbdmthumbs" src="http://websitenamehere.com/testcart/wp-content/uploads/2013/02/ericmoschnau-sepia-200x159.jpg" style="max-width: 200px;" alt="Dancealot" title="Dancealot" border="0" /></a></div>
 

I need to make the image 150px max width, but also have a max height of 150. The override cannot be specific to div id wpbdp-listing-17 as there are other listings with different div id numbers that will have the same style to overide.

I tried the following but it didn't work:

#wpbdp-view-listings-page .wpbdp-view-listings-page wpbdp-page .wpbdp-page-content .listings .listing-thumbnail img [style] { max-width: 150px !important; }

Or what? Of course, needs to work in all browsers...

(DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN")

Thank you for your efforts with this.

[Fotiman]

The only way to override the inline style would be to use !important in your stylesheet.

I tried the following but it didn't work:

#wpbdp-view-listings-page .wpbdp-view-listings-page wpbdp-page .wpbdp-page-content .listings .listing-thumbnail img [style] { max-width: 150px !important; }

You're specifying an id of wpbdp-view-listings-page that CONTAINS a class .wpbdp-view-listings-page, which in turn CONTAINS a class* wpbdp-page, but that is not how your code is structured.

* Note, you were also missing the . before wpbdp-page.

Also, unless you NEED to be for some reason, avoid overly specific selectors, as it will affect performance.

Try this:

#wpbdp-view-listings-page .listing-thumbnail img[style] { 
  max-width: 150px !important; 
  max-height: 150px !important;
}

[ericjt]

You are a god! Thanks so much. It works perfectly. I was confused by so many selectors.

[ericjt]

Issue resolved by another forum. Thanks for looking.

[ericjt]

Oops, that was meant for a different forum. You solved it first. Excellent.