Removing spacing between inline elements and positioning divs straight.

[url]http://crytekuk.info/[/url]

On there you will see in the bottom left corner what is supposed to be a bar. The problem is it isn’t very much like a bar. The html consists of a div container which is mainly used to position the bar as fixed. And then there are images to separate other divs which are used to contain links. The images and divs have spaces between them for some reason. The divs then aren’t properly in-line. They seem to both drop slightly and then the background image doesn’t stretch to be straight with the rest of the bar.

For quickness the HTML is this:

[code=html]<div id=”fim”>
<img id=”buttons_load” src=”http://crytekuk.info/wordpress/wp-content/plugins/fixed_interactive_menu/styles/Blue_glass/load.gif”></img>
<img class=”fim_null_spacer” src=”http://crytekuk.info/wordpress/wp-content/plugins/fixed_interactive_menu/styles/Blue_glass/spacer_left.png”></img>
<div class=”fim_link_container”>
<a id=”toggle_link” href=”javascript:toggleimg()”></a>

</div>
<img class=”fim_null_spacer” src=”http://crytekuk.info/wordpress/wp-content/plugins/fixed_interactive_menu/styles/Blue_glass/spacer_right.png”></img>
<img class=”fim_null_spacer” src=”http://crytekuk.info/wordpress/wp-content/plugins/fixed_interactive_menu/styles/Blue_glass/spacer_left.png”></img>
<div class=”fim_link_container”>
<a id=”new_background” href=”javascript:set_background()”></a>
</div>
<img class=”fim_null_spacer” src=”http://crytekuk.info/wordpress/wp-content/plugins/fixed_interactive_menu/styles/Blue_glass/spacer_right.png”></img>
<img class=”fim_background_grey” src=”http://crytekuk.info/wordpress/wp-content/plugins/fixed_interactive_menu/styles/Blue_glass/background_grey.png”></img>
</div>
[/code]

NOTE: fim_null_spacer changes by javascript to fim_spacer.

CSS:

[CODE]#fim{
position:fixed;
left:0px;
bottom:0px;
opacity: 0.7;
height: 20px;
background: transparent;
z-index:100;
}
.fim_link_container{
margin: 0px;
display: inline;
height: 100%;
background:transparent url(“<? echo $wpu; ?>/fixed_interactive_menu/styles/<? echo $ft ; ?>/background_blue.png”) repeat-x;
border-spacing:0px;
}
.fim_link_container a{
color: #FFF;
font-size: 12px;
padding: 4px 0px;
border-spacing:0px;
}
#buttons_load{
height: 100%;
background:transparent url(“<? echo $wpu; ?>/fixed_interactive_menu/styles/<? echo $ft ; ?>/background_grey.png”) repeat-x;
}
.fim_null_spacer,.fim_spacer,.fim_background_grey,.fim_background_blue,#buttons_load{ /* Reset annoying CSS set by themes */
margin: 0px;
padding:0px;
border-spacing:0px;
}
.fim_null_spacer{
width: 0px;
}
.fim_spacer{
height: 100%;
}
.fim_background_grey{
width: 100%;
}[/CODE]

Thank you for any help given.

Also in #CSS _↴