Remove vertical space between four button create by <input>

[Irfan_9]

I have problem ...create four button using code as mention below which create space when i run the code in IE plz help.    

<tr id="gal-controls"> <td> </td> <td><div id="image-info"> <table border="0" bordercolor="yellow"> <tbody> <tr> <td ><input id="albumTitle" name="albumTitle" readonly type="text" /></td> <td ><input id="imageCaption" name="imageCaption" readonly type="text" /></td> <td><input onclick="_31_play();" type="button" value="Play" /></td> <td ><input onclick="_31_pause();" type="button" value="Pause" /></td> </tr> </tbody> </table> </div></td> <td> </td> </tr>

[Irfan_9]

--CSS CODE FOR ABOVE HTML.

#gal-controls input, #gal-controls select {
    height: 30px;
    background: #000;
    color: red;
}
#gal-controls input {
    background: blue;
    border: 0px;
    color: red;
    font-size: 12pt;
    font-family: arial;
    float: left;
    height: 50px;
    line-height: 50px;
    vertical-align: middle;
    font-weight: normal;}
#gal-controls input[type=button]:hover {
background:blue;
}
#albumTitle {
    width: 600px;
    float: right;
    padding-left: 20px;
    background-color: transparent;
    margin-left: 0px;

#imageCaption {
    width: 200px;
    text-align: right;
    margin-left: -0px;
}
#image-info {
    background: blue;
    border: 5px red;
    color: white;
    font-size: 12pt;
    font-family: arial;
    position: absolute;
    bottom: 5px;
    text-align: center;
    width: 1049px;
    margin-left: 0px;
    margin-top: 0px;
    z-index: 0;
}

[gentlemedia]

Just ditch the tables that you use for layout and use proper tags. You can start with div tags. I will not say that that will solve your problem, but tables were not meant for layouts. Not in 1995 and not in 2017. The HTML structure you have now is overly complicated and is asking for trouble.