Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Dropdown Menu Spacing (Padding) Issues in v 86

more options

I have an issue when viewing my site in Firefox. I have built custom dropdown menus in HTML and only in firefox does the space between items in the dropdown appear double what it does in other browsers. I have seen were others have said this is a padding issue only with Firefox but no way to "fix" it. Looking for some solutions.

I have an issue when viewing my site in Firefox. I have built custom dropdown menus in HTML and only in firefox does the space between items in the dropdown appear double what it does in other browsers. I have seen were others have said this is a padding issue only with Firefox but no way to "fix" it. Looking for some solutions.

All Replies (7)

more options

There are many ways to build a drop-down menu, so it's hard to guess whether this is due to margins, padding, line-heights, or some other factor.

Note: If you decide to share the URL of the site (or another site that demonstrates the same problem), you can break the URL (for example, put a space before the .com) so that it isn't detected as a live link. You can use the Preview Reply button to confirm. Otherwise, URLs of non-Mozilla sites trigger the spam link moderation feature and will delay the appearance of your post.

more options

I can't share the internal site but you can access the code via the following link.

https://www.dropbox.com/s/7de1g9o7fnmitwe/Code.txt?dl=0

more options

Your post will appear eventually!

Meanwhile, if you use each browser's Inspector, are they all following this height rule or are you getting different heights between them:

.dropdown a{
    font-weight: 300;
    color: #009BFF;
    height: 40px;
}
more options

They are all following the listed height rule. The spacing between them all is too much but is all the same.

more options

I actually can't see any height difference at all with the code from Dropbox (this is on Windows, in case that matters):

Can you rule out add-ons as a possible factor? For example:

Testing in Firefox's Safe Mode: In its Safe Mode, Firefox temporarily deactivates extensions, hardware acceleration, optional userChrome.css/userContent.css files, and some other advanced features to help you assess whether these are causing the problem.

If Firefox is running: You can restart Firefox in Safe Mode using either:

  • "3-bar" menu button > "?" Help > Restart with Add-ons Disabled
  • (menu bar) Help menu > Restart with Add-ons Disabled

and OK the restart. A small dialog should appear. Click "Start in Safe Mode" (not Refresh).

If Firefox is not running: Hold down the option/alt key when starting Firefox. (On Windows, hold down the Shift key instead of the option/alt key.) A small dialog should appear. Click "Start in Safe Mode" (not Refresh).

Any improvement?

more options

Safe mode made no difference.

more options

Using the Inspectors' Layout panes in the respective browsers, can you see where the additional spacing is coming from? Since I don't see it, you'll need to be our eyes on this.