Bug 18981 - border-collapse:collapse of <table> and padding: 0 of <td> causing overlapping issue.
Summary: border-collapse:collapse of <table> and padding: 0 of <td> causing overlappin...
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 525.x (Safari 3.1)
Hardware: PC Windows XP
: P2 Normal
Assignee: Nobody
URL: http://foto.mail.ru/cgi-bin/login?noc...
Keywords: HasReduction
Depends on:
Reported: 2008-05-09 16:04 PDT by jasneet
Modified: 2011-10-20 05:21 PDT (History)
4 users (show)

See Also:

screenshot (147.18 KB, image/jpeg)
2008-05-09 16:04 PDT, jasneet
no flags Details
screenshot (147.18 KB, image/jpeg)
2008-05-09 16:04 PDT, jasneet
no flags Details
reduction (570 bytes, text/html)
2008-05-09 16:06 PDT, jasneet
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description jasneet 2008-05-09 16:04:05 PDT
I Steps:
Go to 

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
Comment 1 jasneet 2008-05-09 16:04:40 PDT
Created attachment 21049 [details]
Comment 2 jasneet 2008-05-09 16:04:52 PDT
Created attachment 21050 [details]
Comment 3 jasneet 2008-05-09 16:06:30 PDT
Created attachment 21051 [details]
Comment 4 Vamshi Krishna N 2011-08-29 02:14:09 PDT
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.
Comment 5 Tab Atkins 2011-10-20 05:21:52 PDT
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;".