Graphic central alignment problem

[Phantasmagoric]

I'm having trouble getting some graphics to align centrally in both IE and FireFox and I need to ask for some help please.

If you look at my main site in IE6/7 the top block and logo block are aligned, but if you view it in FireFox there is a drift to the right!
http://skins4forums.com/vbskins/index.php

I am using this as the html:

    <div id="top_block">    
        <div class="top-l"></div>
        <div class="top-m"></div>
         <div class="top-r"></div>
         <div id="topbar"><div style="text-align:center"><img src="$stylevar[imgdir_misc]/top-tag.gif" border="0" alt="" /></div></div>
    </div>

and this as the css:

/* top cells ================================== */
#top_block {
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    width: 100%;
    clear: both;
}

#topbar {
    background-repeat:no-repeat;
    background-position:center;
    width: auto;
    height: 36px;
    padding: 0px;
    margin: -36px 0px 0px 0px;
}

.top-l {
    background-image: url(images/skins/finite/misc/top-l.gif);
    background-repeat: no-repeat;
    float: left;
    height: 36px;
    width: 70px;
    padding: 0px;
    margin:0px;
}

.top-m {
    background-image: url(images/skins/finite/misc/top-m.gif);
    background-repeat: repeat;
    height: 36px;
    margin: 0px 70px 0px 70px;
    width: auto;
    padding: 0px;
}

.top-r {
    background-image: url(images/skins/finite/misc/top-r.gif);
    background-repeat: no-repeat;
    height: 36px;
    float: right;
    margin-top:-36px;
    width: 70px;
    padding: 0px;
}
/* ================================================================================ */

I am trying to make my Skins play nice in IE6, the result ends up as FireFox wont play nice now, the top-tag img drifts over to the right in FireFox.
The same applies for the logo block!

Can anyone see what I'm getting wrong?