I Steps: Go to http://foto.mail.ru/cgi-bin/login?noclear=1&page=photo%2falbums II Issue: In the center column (login form), the text box and drop down are overlapping each other. III Conclusion: The issue is caused by the padding:0 style of the <td> and the border-collapse: collapse of <table>. IV Other browsers: IE7: ok FF3: ok Opera9.24: ok V Nightly tested: 32871
Created attachment 21049 [details] screenshot
Created attachment 21050 [details] screenshot
Created attachment 21051 [details] reduction
I did some analysis on the issue. It seems that the issue is not because of border-collapse or padding. The issue happens if we have a input element(width=100%) inside a <td> as input has its own border which seems to overlap with the <td> border irrespective of whether we have border-collapse or not. The issue seems to be because the input width/border calculation is done w.r.t the outer border of <td>. If the input border calculation is done w.r.t outer border of <td> the issue will not be present. I am analyzing the issue further & will update. P.S. The issue is also reproducible in FF5, too.
Not a bug. As Vamshi says, the <input> element is set to 100% of its parent's width. However, that sets the content-box width, and text inputs have a border, which increases the width further. One simple way to correct this is to set <input> to be "box-sizing: border-box;".