I've encountered a strange issue where a form inside a table cell with hidden inputs causes the cell to expand in IE7 once there are more than one hidden input present.
Here is a screenshot showing the problem:
Here is the HTML code:
<table border="1" class="fix">
<col style="width:150px;" />
<col style="width:200px;" />
<col style="width:200px;" />
<col style="width:200px;" />
<col style="width:190px;" />
<tr>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"><form action="a.php" method="GET">
<input name="a" type="hidden" value="1"/>
<input name="b" type="hidden" value="2"/>
<div class="button-zone"><input type="submit" class="button" value="ABCDEF GEHIJKLM"></div></form></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
</table>
Deleting the line with the input b resolves the issue, but it is necessary for the form. Here is the CSS code:
table.fix {
table-layout: fixed;
}
table.fix td {
overflow: hidden;
}
td {
padding: .31em 1em 2em 1em;
text-align: left;
}
.cell {
background-color: gray;
padding-bottom: 12px;
padding-left: .44em;
}
.button-zone {
float: left;
margin-left: 0px;
position: relative;
}
.button {
background-color: yellow;
font-family: Arial;
font-weight: bold;
color: black;
border: 0;
overflow: visible;
font-size: 16px;
padding: 4px 20px 4px 8px;
}
Is there a way to solve this issue in IE7 without changing the sizes?