[Onion Ninja]

I've run into this problem a few times today: I cannot control how an element is displayed by editing the style sheet because inline CSS is all mashed into the HTML. Arrrghh inline CSS should be outlawed! haha

For example, below is code from 1 product thumbnail cell on the product list/category page. I want the div on the third line have a width of 200px, but it already has 214px inline, and that overrides anything I do on the external style sheet:

<td class="highlight first last product-cell">
  <div class="image">
    <div class="image-border" style="width: 214px;">
      <a href="xxxxxx">
        <div id="common_files0product_thumbnail.tpl3" class="section">
          <img src="xxxxxx" width="200" height="300" />
        </div>
      </a>
    </div>
  </div>
</td>

The tpl file that I believe I need to edit (product_thumbnail.tpl) is everything but HTML. I am guess that this HTML doesn't exist in any file, but is generated, and I might not have the skills to track down where it's coming from.

So I guess I'm asking how to fix the above problem, but also, in general, how to fix similar problems as they come.

Hope that makes sense. I'm using firebug, webmaster mode, fashion mosaic skin, aspirin, and the caffeine is wearing off.

Thanks for having a look.