CSS Rendered Differently for FF and IE8

Question

Below I have included some HTML/CSS. The CSS looks fine in FF, but it is wrong in IE8. In IE8, the Home button appears on the line below the Balance and Turn values. It should appear on the same line. For comparison, you can view the page in both browsers (warning; potentially accesses FB profile) (This link leads to a Facebook app which will request your profile. You have to start a new game, choose a difficulty level, and then you will be taken to the game board. The code in question is at the bottom of the page). I hope someone can tell me how to fix the CSS for IE8. Thanks.

HTML CODE:

$html .= '<div id="info-panel">'."\n";
$html .= '  <div id="total-funds">Balance: &euro;<span id="total-amount">'.$gamePlayerData['funds'].'</span>M</div>'."\n";
$html .= '  <div id="turn">Turn: '.$newTurn.'</div>'."\n";
$html .= '  <div id="home"><a href="'  . $config->url->absolute->fb->canvas . '/"><img src="' . $config->url->absolute->public . '/images/home_24x24.png" id="img-home" alt="Home" /></a></div>'."\n";
$html .= '</div>'."\n";

CSS CODE:

  #info-panel {
    width: 742px;
    border: 3px solid gray;
    background-color: #ddd;
    color: red;
    padding: 6px;
  }

  #total-funds {
    display: inline;
    font-size: 16px;
    padding-right: 10px;
  }

  #turn {
    display: inline;
    font-size: 16px;
    padding-right: 10px;
  }

  div#home {
    display: inline;
    float: right;
  }

  #img-home {
    margin-top: -3px;
  }

Answer 1

I found a fix. I changed the div#home rule to this:

  div#home {
    position: absolute;
    right: 6px;
    bottom: 4px;
  }