I'm a bit confused by your statement -
Why is it different? And why did you feel like you needed to mention it?
my website is a little different than others,see fire bug
Anyway, back to your question. The obvious suggestion would be to create a new class with different styles (put it after the parent CSS in your stylesheet);
And then apply that class to the elements that need it;
background: url("http://www.distributorcentral.com/websites/ImperialScottSpecialtiesdiscounts/preview/images/imperial-logo-ribbon-child.png") no-repeat scroll left bottom #FFFFFF;
border: 1px solid red;
This would require you to manually edit the markup but if you wanted to automate it with CSS, you could use the child selector to apply the new styles to "the child of .productBorder" - something like;
More info on child selectors here: http://css-tricks.com/child-and-sibling-selectors/
.productBorder > div
However, I searched on your markup and couldnt find anything with the "productBorder" class, so I don't know what you're applying it to or what you're calling "children".
You mentioned "children of categories/titles", but likewise, I searched on those terms and couldn't find any elements with those classes either. But, with your page having around 1600 lines of markup, and using many nested tables, its very hard to make sense of things.
I don't know if this has answered your questions, but if it hasn't, please try to provide more information and make sure that classes/elements you're asking questions about actually exist in your markup. I know you have provided the page link, but really, that could be ANY page because I cant relate it to your questions. Or was the broken link that you posted (that I deleted) for the page with "productBorder" class/elements?
It would also help if you could provide a slimmed-down page with just a few dozen lines - 1600 is much too overwhelming for outsiders to digest.