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

Why are my favicons squashed when I try to enlarge them?

  • 13 پاسخ
  • 1 has this problem
  • 10 views
  • آخرین پاسخ توسّط BWGHK

more options

OS X 10.10.2, Firefox 35.0.1

I was trying to increase the size of the favicons on the bookmarks toolbar, from default to 24 x 24. I tried the Stylish extension, as well as the Roomy Toolbar add-on, both of which enlarged the icons.

However the aspect ratio is off; the favicons are the proper width but not the proper height, giving them a squashed appearance.

I confirmed this by replacing one 16x16 favicon with a 24x24 favicon, but it too appears distorted and unclear. It appears the bookmarks toolbar is somehow preventing the favicons from expanding to their correct height.

I tried a bit of css tweaking but nothing worked.

Anyone have any ideas on how I can get the toolbar to behave, i.e. make it allow for the increased height of the favicons?

OS X 10.10.2, Firefox 35.0.1 I was trying to increase the size of the favicons on the bookmarks toolbar, from default to 24 x 24. I tried the Stylish extension, as well as the Roomy Toolbar add-on, both of which enlarged the icons. However the aspect ratio is off; the favicons are the proper width but not the proper height, giving them a squashed appearance. I confirmed this by replacing one 16x16 favicon with a 24x24 favicon, but it too appears distorted and unclear. It appears the bookmarks toolbar is somehow preventing the favicons from expanding to their correct height. I tried a bit of css tweaking but nothing worked. Anyone have any ideas on how I can get the toolbar to behave, i.e. make it allow for the increased height of the favicons?
Attached screenshots

Modified by BWGHK

All Replies (13)

more options

Attached a screenshot in the question that shows the wonky ratio.

Modified by BWGHK

more options

What code are you using in Stylish or userChrome.css?

If you specify the width and the height with the same value then you shouldn't get such squash issues.

#personal-bookmarks > toolbarbutton.bookmark-item > .toolbarbutton-icon {
 height: 24px !important;
 width: 24px !important;
}
more options

cor-el said

What code are you using in Stylish or userChrome.css? If you specify the width and the height with the same value then you shouldn't get such squash issues.

Hi cor-el, that's just it, regardless of specifying the exact height and width in userChrome.css, Stylish or Roomy Bookmarks, i.e. 24x24, they all come out squashed. This happens even if I change the theme from Simple White to the default Firefox theme, so I know it's not theme related.

I just can't figure out why the bookmarks bar doesn't expand.

more options

Did you try to increase the height of the Bookmarks Toolbar and possible other items?

#PersonalToolbar, #personal-bookmarks { height: 35px !important; }

You may also have to check what margin and padding is applied to .bookmark-item.

Did you check in the DOM Inspector what rules are currently applied to various elements in the Bookmarks Toolbar?

more options

Hi cor-el, thanks for your reply.

Yes, I tried dynamically manipulating the toolbar, the hboxes and the scrollbox (see screenshot) with increased height and additional padding via the DOM Inspector. Both worked but the icons remained squashed.

The toolbar itself doesn't seem to be the problem.

In the D.I. the hboxes flashed red as follows:

1. Around the icons, but the entire width of browser; 2. Around the icons, but only to the last icon;

The scrollbox also flashed the same as the second hbox.

I can't see anything else that would restrict the icon height. Unless there's something missing in the css, or a flow setting I don't know about.

But so far no amount of additional height or padding changes the icons in any way.

Interestingly, when I used the Roomy Bookmarks Toolbar add-on to decrease the icon size, the icons became narrower, i.e. horizontally squashed.

I don't know what that means, but it appears that anything other than 16x16 is simply not allowed.

more options

Try the code without the ">":

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

#personal-bookmarks toolbarbutton.bookmark-item .toolbarbutton-icon {
 height: 24px !important;
 width: 24px !important;
}

Modified by cor-el

more options

Tried, thanks, but no change.

I also disabled Roomy Bookmarks Toolbar add-on in testing, no difference.

Lastly, I tried Stylish extension again, no change.

more options

Did you check in the DOM inspector that Firefox is applying the rules to the images (i.e. the selector is correct)?

more options

I'm afraid you've lost me; I'm not very conversant with the DOM Inspector.

Under all the listings of xul:image it says:

xbl:inherits="validate,src=image,label,consumeanchor"

Don't know what that means.

more options

You need to switch the right Object pane to CSS rules to see what rules get applied to the selected element. You can also check the width and height and margins and padding values in the Box model tab (a padding will squash or stretch the image as well).

more options

Some interesting things in Box Model/CSS:

Under 'hbox > hbox > hbox > image' Box Model shows a height of 18 and a width of 0. The css is: chrome://global/content/xul.css

hbox and 'hbox > hbox' is 1876 x 24; css is: chrome://global/content/minimal-xul.css

Scrollbox is also 1876 x 24, the css is: chrome://global/content/xul.css

and also: chrome://aios/skin/css/aios.css --

  1. personal-bookmarks, #PlacesToolbarItems {
 -moz-box-orient: horizontal; }

In no instances is any padding shown on top or bottom. Margins are all zero.

As a test I disabled AOIS and restarted to see if the extension was causing the squashed icons, but it made no difference.

I'm wondering if the hbox > image height at 18 is causing the problem?

more options

Do you have the height rule I posted above and does it show if you select either of those?

#PersonalToolbar, #personal-bookmarks { height: 35px !important; }

(best is to put a space before the # to start a pre tag)

more options

Okay, here's my current setup:

1. userChrome.css (with a space before the '#'):

@namespace url("https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

#PersonalToolbar, #personal-bookmarks { height: 35px !important; }
#personal-bookmarks toolbarbutton.bookmark-item .toolbarbutton-icon {
height: 24px !important;
width: 24px !important;

}

2. hbox > image still shows a width of 0 and height of 18 with Dom Inspector Box Model; everything else now lists as 1876 x 24

The hbox itself shows as width 0 and height 0.

After restarting FF, the icons still appear as 16x16.

If I use Roomy Bookmarks add-on to increase the icon size to 24x24, they appear squashed.

When I disable the add-on and restart, the icons stay at 16 x16.

3. Something else I discovered:

Scrollbox shows as a height of 24 in Box Model, however the individual toolbarbutton nodes (class: bookmark-item) lists as height of 22, and the xul:image within shows width 16 and height 16.


It appears that the toolbar is resizing properly; I can see more height.

But despite userChrome.css, the icons are not resizing to 24x24, although the Box Model appears to be increasing to 24.

Modified by BWGHK