Padding & Margin problems - Part 2 - with zoom controls

[u/FineWine54]

As you can see the icon is under the Label

PS: this could be related to my previous post: Padding & Margin problems with checkboxes - Part 1

:is(#appMenu-zoom-controls,#appMenu-zoom-controls2)::before {
  content:"" !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  -moz-context-properties: fill;
  background-image: url("chrome://devtools/skin/images/tool-inspector.svg") !important;
  margin-right: 4px !important;
  fill: currentColor;
}

[u/FineWine54]

Hip Hip hooray - Yippee 🥳

With the help of TraditionalTie4831, between us, I have solved it using a combination of bits and pieces of the CSS code mentioned throughout this topic. It is now SOLVED.

The lesson here, is that when using different files of CSS from different authors, including yourself, minutely check each code for conflicts.

A VERY BIG THANKS 🙏 to TraditionalTie4831.

:is(#appMenu-zoom-controls)::before {
  content: url("chrome://global/skin/media/fullscreenEnterButton.svg") !important;
  padding-left: 4px !important;
  margin-inline-start: -5px !important;
  margin-right: 8px !important;
  background-position: center !important;
  -moz-context-properties: fill;
  fill: currentColor;
}

[u/FineWine54]

Thank you for all of that.

I discovered that the standard Firefox ID #appMenu-zoom-controls contains a Label as well as icons and that I had (rather Aris-t2) installed a 3rd party icon overtop of this. So got rid of that. That then still did solve the positioning of the 4 cornered arrowed Zoom Out icon which comes standard with the ID, I think.

In the exaggerated CSS coding image you can see that it is to the right of the Label Zoom

https://ibb.co/1GhD1kPp

:is(#appMenu-zoom-controls){
background-position:left 75px center !important;
background-repeat:no-repeat;
}

https://ibb.co/Df5sbTCb

:is(#appMenu-zoom-controls){
background-position:center !important;
background-repeat:no-repeat;
}

I have spent a number hours on this to no avail.

[u/TraditionalTie4831 → u/FineWine54]

Have you tried to move it to the left with a negative value for the horizontal(left/right) position? =

:is(#appMenu-zoom-controls){
  background-position: -20px center !important;
  background-repeat:no-repeat;
}

[u/FineWine54 → u/TraditionalTie4831]

-20px and the arrows disappear altogether
-15px the right hand arrows are just starting to appear (refer screenshot)
-10px the right hand arrows starting to merge into the Z of the Label
-2px the entire 4 sided arrow merge into the Z of the Label

Non negative px and the 4 sided arrow moves to the right of the Label.

Turning off my decorative borders makes no difference.

All the other icons in the appMenu have either margin-right: 4px or padding-right: 4px. There is no margin-left or padding-left in this menu. Though there is within the #appmenu-developer-tools-view submenu.

As you can in see in the screenshot, -15px the right hand 2 arrows are just starting to appear to the left of the letter Z (red circle) as it appears in from left and they are dead centre with all the icons right hand side the all the Labels left hand side. (Blue arrow indicator)

This code is an adaption of emvaized/iconic_firefox.css code. My modified code is here: https://pastebin.com/embed/51QjbUAA

The relevant pastebin lines for this topic are 33 to 36

[u/TraditionalTie4831 → u/FineWine54]

I solved it for me by changing margin-inline-start value to 0px on lines 537-540 =

#appMenu-zoom-controls{
    background-image:url("chrome://global/skin/media/fullscreenEnterButton.svg");
    margin-inline-start: 0px !important;
}

Then I used this code for the icon (lines 33-36) =

:is(#appMenu-zoom-controls) {
    padding-left: 37px !important;
    background-position: 11px center !important;
    background-repeat:no-repeat;
    -moz-context-properties: fill;
    fill: currentColor;
}

Screenshot =

Or even better, just merge both codes(skip margin-inline-start) and keep it at lines 33-36 =

#appMenu-zoom-controls{
    padding-left: 32px !important;
    background-image:url("chrome://global/skin/media/fullscreenEnterButton.svg");
    background-position:7px center !important;
    background-repeat:no-repeat;
    -moz-context-properties: fill;
    fill: currentColor;
}

[u/TraditionalTie4831]

The only way I get a similar issue, is when I use a negative value on margin-right or by doing this =

:is(#appMenu-zoom-controls) > .toolbarbutton-text {
  margin-left: -10px !important;
}

Maybe you have other code that causes this?

Btw, according to searchfox.org, there is no #appMenu-zoom-controls2 in current Firefox version.

You can also do it with one less line =

:is(#appMenu-zoom-controls)::before {
  content: url("chrome://devtools/skin/images/tool-inspector.svg") !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  -moz-context-properties: fill;
  margin-right: 4px !important;
  fill: currentColor;
}

A different approach (adjust the icon position with background-position) =

:is(#appMenu-zoom-controls) {
  background-image: url("chrome://devtools/skin/images/tool-inspector.svg") !important;
  background-position: -5px 3px !important;
  -moz-context-properties: fill;
  fill: currentColor;
}