Link underline appearing above text in Firefox?

Question

On my website, I have a glitch on links in my drop-down menu. I'm using code from Dynamic Drive jQuerySlideMenu.

In Firefox 19, the underlines appear above the text.

How it appears in Firefox.

This is how it's supposed to appear, in Chrome 27:

enter image description here

and in Internet Explorer 10:

enter image description here

I've inspected the elements in Firebug but I'm not sure exactly what's causing this issue. There is no CSS playing with the underline that I can see.

After some quick searching, I found this issue reported in bugzilla in 2012, which is the only thing I found on underlines appearing above the text. It points to vertical-align possibly being the reason for this. I changed vertical-align in the slider CSS but it made no difference (top, middle or bottom.) I'd like to fix it. Is there anything blatantly obvious I'm missing, or some good reason this is happening?

Please show us your code. – Derek Henderson May 30 '13 at 12:58 — Derek Henderson, May 30 '13 at 12:58
may be you need to increase line height – Gangadhar May 30 '13 at 13:03 — Gangadhar, May 30 '13 at 13:03

score 3 · Answer 1 · answered May 30 '13 at 13:01

3

Remove vertical-align: middle; from .jqueryslidemenu .app line 54 in jqueryslidemenu.css and it will solve the issue.

Hence forth use firebug which will be handy in such situations

answered May 30 '13 at 13:01

Mr. Alien

153,751
34
298
278

Thanks, I do use firebug, I just needed another pair of eyes to see the solution. – Elle May 30 '13 at 14:21

score 2 · Accepted Answer · answered May 30 '13 at 13:02

2

You correctly identified vertical-align as the culprit.

The hovered item is being styled by this line in jqueryslidemenu.css:

.jqueryslidemenu .app {
    height: 18px;
    vertical-align: middle;
}

When I remove vertical-align in Firebug, the problem disappears. Thus, remove vertical-align from that line.

If you cannot edit jqueryslidemenu.css for whatever reason, just add the following to your own css file:

.jqueryslidemenu .app {
    vertical-align: inherit;
}

answered May 30 '13 at 13:02

Derek Henderson

9,388
4
42
71

Ah, I didn't check that the default value of `vertical-align` was `baseline`, which is why I didn't try removing the property. Thanks, and a good answer for SO, too. – Elle May 30 '13 at 14:20

Link underline appearing above text in Firefox?

2 Answers2

Linked