html css float:right with img is not working fine

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;}

OutPut at IE

Whereas i need output like on 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

apply float:left to all images first and then apply float:right to your container containing images

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


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

Answer 3

http://jsfiddle.net/Am34U/3/ give bar a width of 800px or something, and say you put punch inside a span and give it a span of 300px and float left, and give the span that contains the images a span of 500px and float left too.

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;
}