Question

I have the following html (i’m also using Jquery and JqueryUI)

<div style="display:none; position:fixed; z-index:100;padding:0;margin:0" class="ui-state-highlight" id="Info">
        <table cellpadding="0" cellspacing="0" style="padding:0;margin:0">
            <tr style="padding:0;margin:0;">
                <td><span class="ui-icon ui-icon-info"></span></td>
                <td width = "100%" style="padding:0;margin:0;"><div id = "InfoText"></div></td>
                <td><button style="width:25px;height:25px;margin:0;padding:0" id="closeInfo"></button></td>
            </tr>
        </table>            
    </div>

It procudes the following:

See where i circled in red? I want to get rid of that yellow space under the button, but i can’t figure out how…

Thanks!

Solved:

<div style="display:none; position:fixed; z-index:100" class="ui-state-highlight" id="Info">
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <td><span class="ui-icon ui-icon-info"></span></td>
                    <td width = "100%"><div id = "InfoText"></div></td>
                    <td><button style="width:25px;height:25px;vertical-align:middle;display:block;" id="closeInfo"></button></td>
                </tr>
            </table>            
        </div>

Answer 1

I think it’s an alignment issue, try:

<td valign="middle">  
  <button style="[...]; vertical-align:middle; display:block;"></button>
</td>