We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Caută ajutor

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.

Află mai multe

Acest fir de discuție a fost arhivat. Adresează o întrebare nouă dacă ai nevoie de ajutor.

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.

Toate răspunsurile (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.