Form fields in tables across different browsers

When I create a table and have form fields in each row, I want the form fields to be close together... almost touching each other. I can get it to work in IE8/Firefox/Opera, but in Chrome and Safari there is a big gap between the form field in each row.

Here is my code:


<table cellpadding="0" style="WIDTH: 100%; BORDER-COLLAPSE: collapse; BORDER-SPACING: 0px;">
<tr>
<td>
<input type="text" style="WIDTH: 200px" /></td>
</tr>
<tr>
<td>
<input type="text" style="WIDTH: 200px" /></td>
</tr>
<tr>
<td>
<input type="text" style="WIDTH: 200px" /></td>
</tr>
<tr>
<td>
<input type="text" style="WIDTH: 200px" /></td>
</tr>
</table>

I've been searching for the fix but I can't find it. Maybe I'm missing something.

Matt

 

Do you have a URL we can look at?

 

http://www.mattaubuchon.com/dashboard/erase.htm

It's just a test page. But if you look at it with IE8 and then Chrome, you will see what I mean.

Thanks Ray,
Matt

 

Chrome doesn't seem to want to comply with Style properties in html. I tried and tested on my end. It simply does not take in the properties.

 

Thanks for looking into it Ray. It dosen't work on Safari either. I guess I will have to deal with it.


Thanks again,
Matt

 

Hello

I solved this problem today and I thought i would post it.

You can close the gap between the form fields in Safari and Chrome by simply adding: MARGIN: 0px;

to the style line of each form field.

thanks,
Matt

 

Odd I thought I tried that.. Good to hear you got it to work.