CSS image override for poplets?

[Guest]

Hi folks,   I am having difficulty overriding a CSS property.  I have poplets where I want an outline and box shadow, but I can't seem to override the default of no border:

I'm using the module style sheet:

.poplets {border: 1px solid #333 !important;

  box-shadow: 2px 2px 2px #999 !important;

    /*border-top: 1px solid #eee;*/

    margin-top: 36px;

    padding: 9px 0;

}

.poplets img, .poplets img a {

    border: 1px solid #333 !important;

  box-shadow: 2px 2px 2px #999 !important;

}

http://joden.businesscatalyst.com/   Click on the first image at the bottom to see poplet area.

This is on line 1

img, a img { border:none; }       and I can't seem to override although it is only supposed to be the default ... 

[Liam Dilley]

There is no CSS applied to the elements there. You need to use something like firebug Jeff so you can see the elements and the classes.

The class on the td of a poplet is - productPopletsItem and so to target the a or img (not the other way around as you have)

So it would be

.productPopletsItem {} for the td

.productPopletsItem a {} for the link

.productPopletsItem a img {} for the image.

[Guest]

Thanks, I was using firebug, but could only see the image css and the table css... didn't realize it was actually a missing css 🙂  That is why I was trying to modify poplets img...  I figured the poplets image was the missing governing css...

HOWEVER,   Adding any of these to the module style sheet still did not have any effect on the layout:

.productPopletsItem  { border: 1px solid #333 !important;

  box-shadow: 2px 2px 2px #999 !important;

  -moz-box-shadow: 2px 2px 2px #999 !important;

  -webkit-box-shadow: 2px 2px 2px #999 !important;}

table.productPopletsItem  { border: 1px solid #333 !important;

  box-shadow: 2px 2px 2px #999 !important;

  -moz-box-shadow: 2px 2px 2px #999 !important;

  -webkit-box-shadow: 2px 2px 2px #999 !important;}

productPopletsItem a img  { border: 1px solid #333 !important;

  box-shadow: 2px 2px 2px #999 !important;

  -moz-box-shadow: 2px 2px 2px #999 !important;

  -webkit-box-shadow: 2px 2px 2px #999 !important;}

Still firebug showed these styles as missing...

[Liam Dilley · Accepted solution]

Need to be putting things in your main styles css as it is overiding and is your primary css sheet - http://joden.businesscatalyst.com/css/style.css