How to ensure vertical alignment in the middle cell of a table in IE6?

Question

I need to create a page for compatibility with IE6; This is customer requirement.

My content <td>should be aligned vertically to the middle of the cell, but by default it is aligned to the bottom of the cell. However, when he clicked, he returned to the middle vertical alignment.

HTML

<table border="1" cellpadding="0" cellspacing="0">
<tr>
    <td>Utility Payments</td>
    <td valign="top" style="border:1px solid #0C0;">
        <div class="select_box_container index01" style="border:1px solid #F00;">
            <h2>-- Select Utility Payment --</h2>
            <ul id="UtilPay" style="z-index: 10;">
                <li data-val="0" class="subhead">-- Electricity --</li>
            </ul>
    </div>
    </td>
</tr>
</table>

CSS

.select_box_container {
    overflow: hidden;
    width: 241px;
}

.select_box_container select {
    background: url(../images/text-box.png);
    background-color: transparent;
}

.select_box_container {
    position: relative;
    overflow: visible;
}

.select_box_container h2 {
    font-size: 12px;
    color: #333333;
    margin: 0px;
    background: url(../../../pgmerc/instpy/images/text-box.png);
    padding: 6px 10px;
}

.select_box_container ul {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #F1F1F1;
    display: none;
    height: auto;
    overflow-y: scroll;
    position: absolute;
    max-height: 247px;
    top: 29px;
    width: 240px;
}

.select_box_container ul li {
    border-bottom: 1px solid #F1F1F1;
    font-size: 12px;
    list-style: none outside none;
    margin: 0;
    padding: 2px 10px;
    width: 204px;
}

.select_box_container ul li:hover { background: #F7F7F7 !important; }


.index_container {
    background: url("../../../pgmerc/instpy/images/zero.png") no-repeat scroll 400px center #EAF3FA;
    border: 1px solid #CCCCCC;
    padding: 9px 20px;
}

.index_container table td {
    font-size: 12px;
    color: #003976;
    padding-right: 20px;
}

.index_container h1 {
    color: #003976;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
}

How do I get it to just align to the middle of the cell?

Reference images for before and after are given below:

Answer 1

Thanks to everyone .. found a solution.

, $( ". select_box_container" ), h2 click.... $( ". select_box_container" ). css ( "position", "relative" );

Answer 2

<h2>-- Select Utility Payment --</h2>

<span>-- Select Utility Payment --</span> or div