1526738 - Citi login page search icon is misaligned

Status: NEW

(Core :: Layout: Block and Inline, defect, P3)

Description

[Asif Youssuff]

Attachment: BAD Banking with Citi Citi com.png

Steps to reproduce:

1. Navigate to: https://online.citi.com/US/login.do

What happens:

The magnifying glass that appears alongside the search text in the area with the blue background and to the right of the Citi logo is too high.

Expected result:

As rendered in Chromium - the magnifying glass is vertically aligned with the search text.

See snippet: http://jsfiddle.net/tfw75c9e/

Comment 1

[Asif Youssuff]

Attachment: citi-good-chromium.png

Comment 2

[Xidorn Quan [:xidorn] UTC+10]

Attachment: reporter's testcase

Comment 3

[Xidorn Quan [:xidorn] UTC+10]

Attachment: simplified testcase from reporter's

Comment 4

[Xidorn Quan [:xidorn] UTC+10]

Attachment: simplified testcase from reporter's

Comment 5

[Xidorn Quan [:xidorn] UTC+10]

It seems that the problem is on the #I_16 element which has the wrong position.

Changing its position value to either absolute or static would give the identical result between Firefox and Chrome, while using position: relative somehow gives the wrong result. Not sure how relative position is calculated here.

Comment 6

[Daniel Holbert [:dholbert]]

It's something to do with the fact that #I_16 is an empty, inline-level containing block for an absolutely positioned child.

You can fix the layout in Firefox by doing either of these minimal things:

• adding a border to #I_16 (e.g. "border: 1px solid lime")
• give #I_16 "vertical-align:top" or "vertical-align:bottom"

These both "snap" that element to the expected position.

Comment 7

[Daniel Holbert [:dholbert]]

(In other words: I don't think that the problem is the relative position being calculated wrong. I suspect it's rather an issue with the baseline-aligned position of the empty inline-level element being calculated wrong.)

Comment 8

[Emilio Cobos Álvarez [:emilio]]

This smells a lot like one of the bugs bug 255139 would fix.