Firefox: How to reduce the line height of some list elements in the browser

Martin Brinkmann
Nov 5, 2013
Updated • Nov 5, 2013

Firefox 25 Stable has been released about a week ago by Mozilla, and with the new version came several changes to the browser.

The Find on page feature for instance was limited to the page it was opened on, and there have also been some changes in regards to secure connections.

Firefox users on Windows Vista or newer who use the sidebar to display bookmarks in the browser, open about:config regularly, Adblock Plus, or other extensions that use the default list styles of the browser, may have noticed that Mozilla has increased the spacing between elements of those lists.

A bug report on Mozilla's bug tracking system confirms the change that was applied to Windows Vista and newer versions of Windows. A screenshot was uploaded on Mozilla's Support Forum that displays the old and new style next to each other.

Firefox: reduce line height in lists

firefox 25 line height

Firefox users who want to restore the old styling of lists in the browser cannot do so from within the browser. There is simply no configuration option -- not in the options and not in about:config -- that restores the old styling in the web browser.

The only option that Firefox users have is to modify the CSS code that the browser uses. This may sound highly technical but is not really that complicated, thankfully.

Here is what you need to do:

  1. Load about:support in the address bar and hit on the enter key. This opens the Troubleshooting Information page.
  2. Locate Show Folder under Application Basics and click on the button to open the Firefox profile folder on the system.
  3. Close Firefox.
  4. Locate the Chrome folder here. If there is no Chrome folder, right-click and select New > Folder and name it Chrome.
  5. Open the folder and find userChrome.css. Again, if it does not exist, create the file. Make sure its extension is .css and not .css.txt. You need to select New > Text Document after a right-click in the folder, and rename the file accordingly.
  6. Add the following code to the end of the file and start Firefox afterwards.

@namespace url(;
.sidebar-placesTree treechildren::-moz-tree-row,
.placesTree treechildren::-moz-tree-row {
height: 1.3em !important;
border-width: 1px !important;

When you do, you will notice that the space between elements of the list has been reduced, so that more are displayed at the same time and without scrolling.

Note: This takes care of bookmarks only.

Now Read: Look up Firefox IDs for custom styling


Tutorials & Tips

Previous Post: «
Next Post: «


  1. tom said on November 7, 2013 at 11:52 pm

    Thanks. I added the code as a new userstyle in Stylish ( ) and it works. I love that almost everything in the Firefox UI can be customized using userstyles!

  2. Kneyfield said on November 7, 2013 at 9:34 am

    I can’t believe it. Google Chrome introduced the same stupid thing for all of their menus with the introduction of their new custom UI, but there it can only be changed with an experimental flag.

    You’ve got to be thankful for XUL as a Firefox user.

  3. R2D2 said on November 6, 2013 at 7:21 pm

    Hey Martin,

    thank you very much. I can’t understand why Mozilla did that :-/ On a Notebook-Screen every pixel is important and with the increased line height i had to scroll up and down even more. I was searching the net for some css-code to fix that as i saw that you already have a solution :-)

    For the ScrapBook-Sidebar you can use:

    #sbTree treechildren::-moz-tree-row {
    height: 1.3em !important;
    border-width: 1px !important;

    so that everything is as it should be.

  4. Jones said on November 6, 2013 at 10:35 am

    Thank you very much!

  5. FirefoxDie said on November 5, 2013 at 6:10 pm

    I don’t like in what direction tends Mozilla with Firefox. The version of the versions is always something changing for the worse. This change not only affects list in menu but other addons too, lifke FireFTP (space beetwen list items are to big, we see less elements). Where is option restoring a better previous solution? Now I must create CSS for every case? What’s incompetence from Mozilla developers.

  6. Ficho said on November 5, 2013 at 5:30 pm

    I don’t have that problem.Maybe it is because of BlackFox V2 theme I am using.
    I would like to know if it is possible to remove Chrome like Link Preview from bottom left (or right)?
    It looks stupid when bookmarks sidebar is enabled.

    1. Martin Brinkmann said on November 5, 2013 at 6:44 pm

      Not sure if you can disable it, but you can increase the time before it is displayed. Change browser.overlink-delay for that.

  7. hessam said on November 5, 2013 at 4:24 pm

    you can also do it with User Style Manager

    also here some useful userstyle you can try

    and some other

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

We love comments and welcome thoughtful and civilized discussion. Rudeness and personal attacks will not be tolerated. Please stay on-topic.
Please note that your comment may not appear immediately after you post it.