DuckDuckGo divider not inline with text #19869

atouchet · 2018-01-26T03:35:25Z

URL: https://duckduckgo.com/?q=Servo&t=hw

Image of issue (Firefox top, Servo bottom):

The divider between "Videos" and "Meanings" isn't inline with the text in Servo. Tested in Windows 10 with Browser.html.

sviter · 2018-01-28T13:36:39Z

<!DOCTYPE html>
<style>
.zcm__sep--h:before {
 margin:0 7px;
 height:1em
}
.zcm__item,.zcm__sep--h {
 vertical-align:top;
 display:inline-block
}
.zcm__link {
 display:block;
 margin:0 7px;
 line-height:37px;
}
.zcm__sep--h {
 line-height:37px;
}
.zcm__sep--h:before {
 top:0.1em
}
.sep--before:before {
 border-left:1px solid #d0d0d0;
 display:inline-block;
 position:relative;
}
.sep--before:before {
 content:""
}
</style>
<ul class="zcm__menu zcm__dynamic has-zci" id="duckbar_new">
    <span id="duckbar_dynamic_sep" class="zcm__sep--h sep--before"></span>
    <li class="zcm__item"><a data-zci-link="meanings" class="zcm__link  js-zci-link  js-zci-link--meanings" href="#">Text</a></li>
</ul>

If I delete vertical-align:top; it's not affect FF but fix issue for Servo

jdm added the C-needs-test label Jan 26, 2018

jdm added C-has-manual-testcase and removed C-needs-test labels Jan 28, 2018

paulrouget mentioned this issue Feb 9, 2018

DuckDuckGo bugs #9915

Open

16 of 24 tasks complete

servo / servo

DuckDuckGo divider not inline with text #19869

DuckDuckGo divider not inline with text #19869

atouchet commented Jan 26, 2018 •

edited

sviter commented Jan 28, 2018

servo / servo

Join GitHub today

DuckDuckGo divider not inline with text #19869

DuckDuckGo divider not inline with text #19869

Comments

atouchet commented Jan 26, 2018 • edited

sviter commented Jan 28, 2018

atouchet commented Jan 26, 2018 •

edited