浮動小数点数と組み合わせた負の余白 - 上端が期待通りに機能しない（Firefoxのみ）

Question

この画面を作成しようとしますが、右側のテキストフィールドは上に移動します。ここで

はworking exampleで、ここに私のコードです：

HTML：

<div class="TileMenu"> 
    <div class="TileRow"> 
     <div class="LeftTile"> 
      <div class="TileImage"> 
       <img src="http://page.mi.fu-berlin.de/krudolph/stuff/stackoverflow.png" title="Castle" alt="Castle" /> 
      </div> 
      <div class="TileText"> 
       <p>Text1</p> 
      </div> 
     </div> 
     <div class="RightTile"> 
      <div class="TileImage"> 
       <img src="http://page.mi.fu-berlin.de/krudolph/stuff/stackoverflow.png" title="House" alt="House" /> 
      </div> 
      <div class="TileText"> 
       <p>Text 2</p> 
      </div> 
     </div> 
    </div> 
    <div class="TileRow"> 
     <div class="LeftTile"> 
      <div class="TileImage"> 
       <img src="http://page.mi.fu-berlin.de/krudolph/stuff/stackoverflow.png" title="Satellite" alt="Satellite" /> 
      </div> 
      <div class="TileText"> 
       <p>Text 3</p> 
      </div> 
     </div> 
     <div class="RightTile"> 
      <div class="TileImage"> 
       <img src="http://page.mi.fu-berlin.de/krudolph/stuff/stackoverflow.png" title="Palace" alt="Palace" /> 
      </div> 
      <div class="TileText"> 
       <p>Text 4</p> 
      </div> 
     </div> 
    </div> 
</div> 

CSS：

.TileRow{ 
    padding: 5px 0px; 
    clear: both; 
} 

.LeftTile{ 
    width: 49.7%; 
    float: left; 
    /*height: 340px; 
    overflow: hidden;*/ 
} 

.LeftTile img{ 
    width: 100%; 
} 

.RightTile{ 
    width: 49.7%; 
    float: right; 
    /*height: 340px; 
    overflow: hidden;*/ 
} 

.RightTile img{ 
    width: 100%; 
    float: right; 
} 

.TileImage{ 
    width: 49.7%; 
} 

.TileText{ 
    position: relative; 
    margin-top: -80px; 
    max-width: 150px; 
    height: 50px; 
    background-color: #FFF; 
    color: #57abe9; 
    padding-left: 10px; 
    display: table; 
} 

.TileText p{ 
    display: table-cell; 
    vertical-align: middle; 
    font-size: 1.3em; 
} 

前にtop:-80px;を使用しようとしましたが、テキストフィールドのために各行間に大きな空白がありました。だから私はmargin-top: -80px;を使用していますが、これはFirefoxでのみ動作するようです。

Answer 1

位置について：絶対？

http://jsfiddle.net/KjakS/8/

Answer 2

何がRightTileクラスで画像上float:rightを削除する場合は？このようなものに：http://jsfiddle.net/KjakS/7/

.RightTile img{ width: 100%; }