Overridding SharePoint's square.gif and setrect.gif

Question

Within the custom branding of a SharePoint 2007 site collection, I need to change the bullet images. Instead of using <li> tags, SharePoint 2007 uses tables and images as follows:

<tr>
    <td class="ms-vb" style="padding-bottom: 5px;"><img alt="" src="/_layouts/images/square.gif">&nbsp;</td>
    <td class="ms-vb" style="padding-bottom: 5px; padding-left: 5px;">
        <a href="http://stackoverflow.com" onfocus="OnLink(this)">stackoverflow</a>
    </td>
</tr>

and

<tr>
    <td width="8px" valign="top" nowrap style="padding-top: 5px;" class="ms-descriptiontext">
        <img width="5px" height="5px" alt="" src="/_layouts/images/setrect.gif">&nbsp;
    </td>
    <td valign="top" style="padding-top: 7px; padding-left: 3px;" class="ms-descriptiontext">
        <a href="/_layouts/people.aspx" id="ctl00_PlaceHolderMain_UsersAndPermissions_RptControls_PeopleAndGroups">People and groups</a>
    </td>
</tr>

My only option is CSS. The target browser is IE8 in Quirks mode. I cannot:

1. Change the OOTB images, layout pages, or the Links schema.xml
2. Change the Master Page or HTML to add DOCTYPE or meta tags
3. Use Javascript

I tried the following CSS, but it appears that padding is being ignored:

td.ms-descriptiontext img,
td.ms-vb img
{
    background:transparent url("/_layouts/images/myproject/bullet.gif") no-repeat top left;
    height:5px;
    padding-right:5px;
    width:0;
}

Any ideas?

Answer 1

Try:

td.ms-descriptiontext img,
td.ms-vb img
{
    background:transparent url("/_layouts/images/myproject/bullet.gif") no-repeat top left;
    display: block;
    height: 0;
    padding: 5px 5px 0 0;
}

Answer 2

Try margin instead of padding?

Answer 3

I did a work-around javascript: Look for img tags and replace their source:

  <script language="javascript" type="text/javascript">
var arrElements = document.getElementsByTagName("img");
for (var i=0; i<arrElements.length; i++) {
        //get pointer each image element:
        var element=arrElements[i];
        //check for a source with /images/square.gif from this site:
        if (element.getAttribute('src') == "http://www.MY-SITE-NAME.com/_layouts/images/square.gif") {
            //found... change it's src to our new image:
            element.setAttribute('src', 'http://www.MY-SITE-NAME.com/MY-LOCATION/MY-CUSTOM-BULLET.gif');
        }
    }