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

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 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(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
.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

Advertisement