IE7 gets the content in my table to overlap

Question

I have a large table to display and enter data. Each cell contains one input field, one select and a span with a background image. I want all three to stay on the same line when user resize the window. I got it to work properly in IE8, FF and Chrome, but IE7 isn't happy with my design. It does keep all three on the same line, but instead of preventing the table from getting too small, everything overlapped which is probably the worst thing it could do.

Here's a sample of the table:

<table>
        <tr>
            <td>Check Stock</td>
            <td class="param-value-TransferTime" style="white-space: nowrap;">
                <div style="position: relative; margin-right: 16px;">
                    <span style="float: left;">                    
                        <input type="text" size="3" maxlength="3" name="duration" autocomplete="off">
                        <select name="unit"><option value="Y">Years</option><option value="M">Months</option><option value="W">Weeks</option><option value="D">Days</option></select>                   
                    </span>
                    <span style="position: absolute; right: -16px;height:16px;width:16px;background-color:blue"></span>
                </div>
            </td>
            <td class="param-value-QueueTime" style="white-space: nowrap;">
                <div style="position: relative; margin-right: 16px;">
                    <span style="float: left;">                
                        <input type="text" size="3" maxlength="3" name="duration" autocomplete="off">
                        <select name="unit"><option value="Y">Years</option><option value="M">Months</option><option value="W">Weeks</option><option value="D">Days</option></select>                
                    </span>
                    <span style="position: absolute; right: -16px;height:16px;width:16px;background-color:blue"></span>
                </div>
            </td>
            <td class="param-value-WaitTime" style="white-space: nowrap;">
                <div style="position: relative; margin-right: 16px;">
                    <span style="float: left;">
                        <input type="text" size="3" maxlength="3" name="duration" autocomplete="off">
                        <select name="unit"><option value="Y">Years</option><option value="M">Months</option><option value="W">Weeks</option><option value="D">Days</option></select>
                    </span>                    
                    <span style="position: absolute; right: -16px;height:16px;width:16px;background-color:blue"></span>
                </div>
            </td>        
        </tr>        
</table>

I've replace my image with the blue square having the same styling apply to it.

Here's the proper behaviour done by all browser but IE7:

Here's what IE7 does:

According to my research, I though the easiest way to fix my problem would be to add a width to my TD. I'd prefer not to since the actual input in each cell will vary depending on user choice so I'd like for the browser to find the minimum size. I did try it anyway, but it didn't fix the issue. I tried width and min-width, but the content still got overlapped.

Any idea?

Answer 1

Three things:

1. The code would be much easier to fix and manipulate if you separated structure (HTML) from style (CSS). Not a terrible criticism, just an observation.

2. You could remove the positioning and floats in your tds and give the elements display:inline-block. Might work.

3. If that fails, use a conditional comment to target IE7 (eg., <!--[if IE 7]>) and apply widths to the tds there.