I'm sure this is a beginner HTML question - I'm a novice at this anyway...

I'm using an actionstatus component to display an animated GIF when a long-running process is invoked by a button click.

But the GIF, when displayed, shifts other items in the same row (it's in a <table>) to the left, and when the animation is complete the other items in the row shift back.

I've played with the stop facet to try and size it to the same size as the GIF, but the only way I can seem to almost align the GIF version of the row with the non-GIF version is to use non-breaking spaces - and it's still not quite right -

What's the correct way to handle something like this?

Here's the relevant markup:

    <td>
        <apex:commandButton value="Search" action="{!doSearch}" reRender="results,msg" id="butSearch"
                            onclick="hideList();" oncomplete="showList();" status="pleasewait" />
    </td>
    <td>
        <apex:actionStatus id="pleasewait">
            <apex:facet name="start">
                &nbsp;<img src="{!$Resource.AjaxAnimation}" />
            </apex:facet>
            <apex:facet name="stop">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </apex:facet>
        </apex:actionstatus> 
    </td>