I've encountered an issue with a form located below the banner on a website's homepage. The form includes a submit button and the entire site is designed to be responsive.
When zooming in or out of the browser (ctrl + scroll up/down), I noticed that the submit button overflows outside of its designated div.
The form is structured within a table (td, tr) layout.
filterWrap tr td + td, .filterWrap2 tr td + td {
border-left: 1px solid #E1E1E1;
}
.filterWrap td {
padding-left: 18px;
padding-right: 18px;
}
.filterWrap tr td, .filterWrap2 tr td {
width: auto;
}
Here is the code snippet for the submit button div:
<td rowspan="3"><a onclick="jQuery(this).closest('form').submit(); return false;" href="">
<div class="filterBtn">
<p>Submit</p>
</div>
</a></td>
You can view the problematic form on the banner by following this link:
Your assistance and suggestions would be greatly appreciated.