border-collapse:collapse of <table> and padding: 0 of <td> causing overlapping issue.

• Component: CSS
• Status: RESOLVED INVALID

[jasneet]

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

[jasneet]

Created attachment 21049 [details]
screenshot

[jasneet]

Created attachment 21050 [details]
screenshot

[jasneet]

Created attachment 21051 [details]
reduction

[Vamshi Krishna N]

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.

[Tab Atkins]

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;".