Search code examples
htmlcssimagecss-floatrights

html css float:right with img is not working fine

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 enter image description here

Whereas i need output like on Firefox enter image description here

Solution

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