Web-bugs: www.msn.com - layout is messed up

[bull500]

URL: http://www.msn.com/en-in/
Browser / Version: Firefox 50.0
Operating System: Android
Problem type: Layout is messed up

Steps to Reproduce
1) Navigate to: http://www.msn.com/en-in/
2) Layout is messed up

Expected Behavior:
Clean layout

Actual Behavior:
Logo partially rendering, some layout issues

_From webcompat.com with ❤️_

[adamopenweb]

Thanks @bull500!
I can confirm this issue in Firefox Android 47 & 50.

Removing the display and vertical align properties here makes the 'msn' text heading align properly in Firefox. But it doesn't look right in Chrome.

header-common > h1 a, #header-common > h1 > span {
    color: #fff;
    display: inline-block;
    vertical-align: middle;
}

But if we try changing positioning to absolute and adjust the margin-left a bit, it looks pretty good in both.

#header-common .vertical {
position: absolute;
margin-left: -3rem;
}

[karlcow]

For Microsoft/MSN developers, we are talking about

The current code is

<h1>
<a class="logo" aria-label="msn" href="/en-in" data-id="15" data-m="{&quot;i&quot;:15,&quot;p&quot;:14,&quot;n&quot;:&quot;msnlogo&quot;,&quot;y&quot;:14,&quot;l&quot;:&quot;homepage&quot;,&quot;o&quot;:1}">msn </a>
 <a class="vertical" href="/en-in/#tevt=click_nonnav" data-id="16" data-m="{&quot;i&quot;:16,&quot;p&quot;:14,&quot;n&quot;:&quot;HeaderVerticalLink&quot;,&quot;y&quot;:14,&quot;l&quot;:&quot;homepage&quot;,&quot;o&quot;:2}">msn</a>

 </h1>

The much simpler fix is to remove the space in between the two a href aka
to replace the current

>msn </a> 
<a class="ver

by

>msn </a><a class="ver

[karlcow]

Contacted Microsoft about it.

[adamopenweb]

This issue still exists, tested in Firefox 53 for Android.

[softvision-oana-arbuzov]

The issue is still reproducible.

Tested with:
Browser / Version: Firefox Mobile Nightly 56.0a1 (2017-06-19)
Operating System: LG G5 (Android 7.0) - Resolution 1440 x 2560 pixels (~554 ppi pixel density)

[karlcow]

7613 is a duplicate of this issue.

Removing display: inline-block on the h1 will fix the issue.

[karlcow]

Recontacted today.

[karlcow]

Microsoft answer.

Just wanted to share an update with you. The MSN team has acknowledged the issue and they will be investigating shortly.

\o/

[karlcow]

The MSN team is investigating the issue. Wanted to ensure I share that this is on our radar. 😊

[cipriansv]

After retesting the issue I confirm that the issue has been fixed.

Tested with:
Browser / Version: Firefox Nightly 68.1a1 (2019-08-20), Firefox Preview 1.3.0 (Build #12321503)
Operating System: Huawei P10 (Android 8.0) - 1080 x 1920 pixels (~432 ppi pixel density)