Trouble Overriding element.style

[toddvalentine]

I am having trouble overriding the element.style in the table cell from my stylesheet:

<table id="ctl00_pageContent_ctl00_productList" class="product-list" cellspacing="0" border="0" style="width:100%;border-collapse:collapse;">
<tr>
<td class="product-list-item-container product-list-item-special" style="width:33.33333%;">Item Here</td>
</tr>

I have tried

table#ctl00_pageContent_ctl00_productList tr td.product-list-item-container {
width: 24% !important;
}

and

table#ctl00_pageContent_ctl00_productList tr td.product-list-item-special {
width: 24% !important;
}

as well as just

td.product-list-item-container {
width: 24% !important;
}

Any help would be super appreciated. A bit flustered on this one. Firebug is showing the element.style width of 33.3333% marked out, but the HTML window is still showing the inline style of width: 33.3333% on the element.

p.s. This is an e-commerce template modification (hence the table based markup) so I don’t have access to the mark-up or the JS.

[TheDoc]

No love for IE6, but this is the only way I know to override inline styles:

https://css-tricks.com/override-inline-styles-with-css/

[toddvalentine]

tried this:

td.product-list-item-container[style] {
width: 24% !important;
}

Still no luck!! Is it possible that its just not possible or am I not targeting specifically enough?

[Author]

Posts