Positioned div inside td breaks table

[jlindsey]

I have a table that shows an upload box. Because a normal file input object cannot be styled, I use div positioning to display another input underneath the file input (file input has opacity of 0). This part works great, but for whatever reason, it messes up the rest of the upload table. It appears to merge two rows. Is there any clue why this does it?

<table width="300px" height="200px" cellpadding="0" cellspacing="0" class="transparent_overbox">
<tr>
<td colspan="3" height="24px">
<div style="padding: 3px; padding-left: 5px;">
<div class="paragraph_header">Upload</div>
</div>
</td>
<td width="32px" height="20px">
<img src="helper?synapsecmd=show.image@.1.3.27.1" border="none" onclick="destroyOverlaybox()" style="cursor: pointer; height: 28px;">
</div>
</td></tr>
<tr><td colspan="4" height="15px"></td></tr>
<tr>
<td width="32px"></td>
<td colspan="2" align="center">
Irrelevant select input
</td>
<td></td></tr>

Above just shows how the table layout is. Below is the div that breaks the rest of the table.

<tr>
<td width="32px"></td>
<td colspan="2" align="center">
<div style="position: relative">
<div style="position: absolute; z-index: 8001">
<input type="file" style="-moz-opacity: 0; filter:alpha(opacity: 0); opacity: 0;">
</div>
<div style="position: absolute; z-index: 8000">
<input type="text" style="background: url(http://www.example.com/helper?synapsecmd=show.image@.1.1.8.1); padding: 3px; border: solid 1px #333333; color: #EFEFEF; font: inherit; width: 140px;" name="filesrc">
</div>
</div>
</td>
<td></td></tr>
<tr><td width="32px"></td><td></td>
<td align="right">
<input type="submit" value="Upload" class="transparent_formobject_button" onMouseOut="this.className=\'transparent_formobject_button\'" onMouseOver="this.className=\'transparent_formobject_button_over\'" name="sbmtupload" id="sbmtupload">
</td>
<td></td></tr>
<tr><td colspan="4" height="15px"></td></tr></table>

The div in the first row shows perfectly, but merges the row with the div and the row with the submit button. I believe the positioning is the culprit. I have run out of ideas though.

[edited by: swa66 at 10:41 am (utc) on May 25, 2009]
[edit reason] please use example.com not your own domainname [/edit]

[jlindsey]

Nevermind. Another alternative worked.