Well first off, Internet Explorer is the one that is displaying it wrong. IE does not comply to W3 standards so your code is being displayed improperly. Firefox is displaying it correctly.

Here is your current div

div.bottom
{
width: 700px;
height: 20px;
padding-top: 8px;
margin-top: 16px;
text-align: right;
background-color: #CC0000;
border-top: 1px solid #000000;
clear: both;
}

The reason firefox displays this like it is, is simply becuase you told it too. text-align: right; will make everything display to the right hand side (not just text). You also have no padding in between the images, therefore the images are right next to each other as you can see.

You might want to try this:

div.bottom
{
width: 700px;
padding: 8px;
margin-top: 16px;
text-align: center;
background-color: #CC0000;
border-top: 1px solid #000000;
clear: both;
}

Let me the know the results, and i'll guide you from their.