.siteDocs Images Not Lining Up

[Guest cinnabar]

(Running CC3.0.6 based on killer skin)

I've copied over the .siteDocs, .siteDocsBgRight and left to a new skin and the images look like this...

The layout.css file containing the .siteDocs references looks like this...

.siteDocs {

text-align: center;

background-image: url(../styleImages/backgrounds/siteDocsBg.gif);

height: 30px;

color: #FFF;

}

.siteDocsBgRight {

background-image: url(../styleImages/backgrounds/siteDocsBgRight.gif);

background-repeat: no-repeat;

background-position: right;

height: 30px;

}

.siteDocsBgLeft {

float: left;

background-image: url(../styleImages/backgrounds/siteDocsBgLeft.gif);

background-repeat: no-repeat;

background-position: left;

height: 30px;

}

The styletemplates/boxes/siteDocs.tpl file (which i'm assuming controls the position of the siteDocs images) looks like this...

<!-- BEGIN: site_docs -->

<div class="siteDocs">

<div class="siteDocsBgRight">

<span class="siteDocsBgLeft">&nbsp;</span>

<div style="padding-top: 0px;">

<!-- BEGIN: a -->

<a href="index.php?act=viewDoc&amp;docId={DATA.doc_id}" class="txtSiteDocs">{DATA.doc_name}</a>

<!-- BEGIN: sep -->|<!-- END: sep -->

<!-- END: a -->

</div>

</div>

</div>

<!-- END: site_docs -->

They for some reason don't sit neatly next to each other. Does anyone know what is wrong, your help is appreciated.

Gary