1636451 - Menu underline styling mistake (CSS)

Status: RESOLVED DUPLICATE of bug 1584348

(Core :: Layout: Text and Fonts, defect)

Description

[Knowguy]

Attachment: blackboard-firefox77b3.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:77.0) Gecko/20100101 Firefox/77.0

Steps to reproduce:

1. ) Navigate to my College's Blackboard site.
   2.) Hover over menu items.
   3.) Underline hover goes through menu text.

Actual results:

CSS menu underline text flows through text.

• Attached results from Firefox 77 Beta 3 and Chrome 83

Expected results:

CSS menu underline should be underneath text not behind or through it.

Comment 1

[Knowguy]

Attachment: blackboard-chrome83b.png

Comment 2

[Brian Birtles (:birtles)]

Hi. Can you please include either a link or, if the site requires a login, a copy of the relevant bit of HTML?

Without that I'm not sure what component this belongs in (might be a painting or layout issue) but it doesn't appear to be transitions/animations related.

Comment 3

[Jonathan Kew [:jfkthame]]

This is almost certainly the same underlying issue as bug 1584348 -- we'd need to see the HTML & CSS to confirm, but it's probably a case where the underline is applied to a parent link element, but the text is in a child element that is shifted down (e.g. using vertical-align) relative to the element that carries the underline. Chrome's behavior in this case is a clear violation of the CSS spec, as discussed in other bugs.

Comment 4

[Knowguy]

Downloading the whole page as HTML didn't go well. I think I have copied the relevant HTML and attaching. I will see if I can get the CSS

Comment 5

[Knowguy]

Attachment: page.html

Comment 6

[Jonathan Kew [:jfkthame]]

Looking in that HTML for the "Courses" link, for example, I find:

  <!----><a ng-if="!$ctrl.link.disabled" class="base-navigation-button-content themed-background-primary-alt-fill-only theme-border-left-active" ui-sref="base.courses" bb-enter-key-up-focus=".base-skip-link .skip-link" bb-trigger-enter-keydown="true" ng-click="$ctrl.handleBaseLinkClick($event)" ng-attr-tabindex="{{ ($ctrl.previewMode ? '-1' : '') }}" analytics-id="courses.base.navigation.handleBase.link" href="https://elearning.kctcs.edu/ultra/course" tabindex="">
    <bb-svg-icon icon="courses" size="medium" aria-hidden="true">
    <svg class="svg-icon medium-icon default" focusable="false" aria-hidden="true" bb-cache-compilation="svg-icon">
      <use xlink:href="https://elearning.kctcs.edu/ultra/institution-page#icon-medium-courses" ng-href="https://elearning.kctcs.edu/ultra/institution-page#icon-medium-courses"></use>
    </svg>
  </bb-svg-icon>
    <ng-switch on="$ctrl.link.id">
      <!---->
      <!----><span ng-switch-default="" class="link-text" bb-translate="">Courses</span><!---->
    </ng-switch>
    <span class="round alert label ng-hide" ng-show="counts[$ctrl.link.id]"></span>
  </a><!---->

where I think the structure can be simplified down to:

    <a>
      <span class="link-text">Courses</span>
    </a>

My guess is that there's a CSS property such as vertical-align: middle being applied to that link-text class, which shifts the text slightly lower relative to the enclosing <a> element; but the underline is coming from a rule such as a:hover { text-decoration: underline } which applies it to the <a> rather than to the <span> inside it. You may be able to use the Inspector (e.g. right-click on the text and choose Inspect Element from the context menu) to check the CSS properties that are being applied (though I fear there's going to be an awful lot of clutter there).

(I'm speculating here, as I don't have a login to actually view and inspect the page, but something along these lines would exactly explain the result shown in the screenshots.)

Comment 7

[Jonathan Kew [:jfkthame]]

Ah - I found what looks like very similar styling on the publicly-accessible page at https://elearning.kctcs.edu/ultra/institution-page. Here, the "Course Catalog", "Organization Catalog", and "Return to Sign In" links show the same issue, although interestingly, the "Blackboard Guest" link at the top does not.

In this case, the source of the vertical-align: middle property on the link text isn't specified on the link-text class itself, it seems to be coming from a rule that includes:

.base #side-menu .off-canvas-list span { vertical-align: middle; }

found in base-layout.scss.

So - definitely the same as bug 1584348.