HTML CSS поплавок: прямо с IMG не работает нормально

Question

HTML

<table class='titleStatus' id='title'> 
     <tr> 
      <td class='lefttop'></td> 
      <td class='bar'>Punch Data 
       <img class='minMaxClose' src='images/close.png'> 
       <img class='minMaxClose' src='images/max.png'> 
       <img class='minMaxClose' src='images/minimize.png'> 
       <img class='minMaxClose' src='images/setting.png'></td> 
      <td class='righttop'></td> 
     </tr> 
    </table> 

CSS

.minMaxClose{float: right;} 

Выходная мощность на IE

Принимая во внимание Мне нужен выход, как на Firefox

Answer 1

HTML

<table class='titleStatus' id='title'> 
     <tr> 
      <td class='lefttop'></td> 
      <td class='bar'>Punch Data 
         <!--[if IE]> 
          <div class='ico-wrapIE'> 
         <![endif]--> 
         <!--[if !IE]> 
          <div class='ico-wrap'> 
         <![endif]--> 
       <img class='minMaxClose' src='images/setting.png'> 
       <img class='minMaxClose' src='images/minimize.png'> 
       <img class='minMaxClose' src='images/max.png'> 
       <img class='minMaxClose' src='images/close.png'> 
      </div> 
      </td> 
      <td class='righttop'></td> 
     </tr> 
    </table> 

CSS

.ico-wrap{float:right;} 
.ico-wrapIE { 
    position: absolute; 
    right: 2px; 
    top: 2px; 
} 

Answer 2

применять поплавок: левый ко всем изображениям, а затем применить поплавок: право на ваш контейнер, содержащий образы

.bar img{ 
float:left;//for shifting alongside 
} 


.bar{ 
float:right;//for shifting entire division to right side 
} 

Answer 3

http://jsfiddle.net/Am34U/3/ поддавки бар шириной 800px или что-то, и скажем, вы наносили удар в промежуток и давали ему диапазон 300 пикселей и плавали влево, а также давали пролет, содержащий изображения, диапазон 500 пикселей и поплавок слева тоже.

HTML

<table class='titleStatus' id='title'> 
     <tr> 
      <td class='lefttop'></td> 
      <td class='bar'> 
       <span id="punch">Punch Data</span> 
       <span id="close"> 

        <img class='minMaxClose' src='images/close.png'> 
        <img class='minMaxClose' src='images/max.png'> 
        <img class='minMaxClose' src='images/minimize.png'> 
        <img class='minMaxClose' src='images/setting.png'> 
       </span> 
      </td> 
      <td class='righttop'></td> 
     </tr> 
</table> 

CSS

.minMaxClose{ 
    float: right; 
} 
#close{ 
    background: purple; 
    width: 400px; 
    float: left; 
} 
#punch{ 
    background: orange; 
    width: 300px; 
    float: left; 
} 
.bar{ 
    width: 700px; 
    background: blue; 
}