How to make Chrome obey this rule?

Question

Here is the code:

<table style='margin-left: auto; margin-right: auto; text-align: right;'>
 <tr>
  <td style='vertical-align: top;'>Title:</td>
  <td style='width: 400px;'><input type='text' style='border: 1px solid black; width: 100%;' />
 </tr>
 <tr>
  <td style='vertical-align: top;'>Content:</td>
  <td><textarea style='border: 1px solid black; width: 100%;' rows='7'></textarea></td>
 </tr>
</table>

Here is what it looks like in Opera and FireFox (in Linux):

But then in Chrome (also in Linux):

As you can see, the first text box is not the right width :(

How can I fix this?

Update: here is a live page that demonstrates the problem.

Answer 1

Aha! Now that you've posted a live link, this is much more clear.

The problem is, your textarea has a padding of 2px from left and right. Therefore, it's right edge is calculated as 2px + 100%, which evaluates to "2px to the right from the td's right edge" (because td's right edge is 100%).

(I hope this is clear enough; I'm trying my best :-)

To fix this, either put padding: 0 on the textarea, or put padding: 0 2px on the input.