Bug 18089 – links are displayed in another box because of next element's positioning

• Status: NEW
• Component: Layout and Rendering

[jasneet]

I Steps:
Go to 
http://msn.careerbuilder.com/custom/msn/careeradvice/viewarticle.aspx?articleid=1285&SiteId=cbmsnbc41285&sc_extcmp=JS_1285_msnbc&GT1=10884&cbRecursionCnt=2&cbsid=24c99f3760ee49cf8d3b2a1085c9bbf1-255449494-JE-5

II Issue:
In the "Find Jobs" column, the "Job Recommendations" and "Find new jobs in your area" seem to be in a different section as there's a horizontal line after the "advanced search". In FF and IE, all links are part of one section.

III Conclusion:
For the simplified testcase, the <div> that is containing the 2nd row has-
 position: absolute; top: 61px;
and this is what's causing the issue. The 1st <div> that contains the textfields have some border (in cyan) but you don't see the bottom border in FF and IE because the positioning of the 2nd <div> overlaps  it. In addition, the background-color of the 2nd <div> is set to white so it washes the border of the 1st <div>.

IV Other browsers:
IE7: ok
FF3: ok
Opera9.24: ok

V Nightly tested: 31238

[jasneet]

Created attachment 20055 [details]
screenshot

[jasneet]

Created attachment 20056 [details]
reduction

[Ahmad Saleem]

I am able to reproduce this bug in Safari 15.6.1 on macOS 12.5.1 from attached reduction where it shows "cyan" bottom border while in case of Firefox Nightly 106 and Chrome Canary 107, it does not show "bottom" cyan border.

I am changing the status to "New". Thanks!

[Radar WebKit Bug Importer]

<rdar://problem/99335918>