Tab-Leiste verringert spontan die Höhe

Fox2Fox

Was mir vor einiger Zeit mal aufgefallen ist, dass sich die Tab-Leiste spontan in der Höhe verringert. Und die Höhe der Tabs auch.

Das passiert spontan und unregelmäßig, während Firefox geöffnet ist.

Screenshot 1 zeigt die gewöhnliche und gewollte Höhe; Screenshot 2 zeigt die verringerte Höhe.

Jetzt habe ich 5 Scripte und 8 CSS, die mit Tableiste / Tabs zu tun haben.

Ich denke, dann wird es schwierig werden, den Verursacher zu finden.

Aber vielleicht hat jemand vorab eine Idee, bei welchem Script, welcher CSS zu suchen ist.

Kann natürlich alle Inhalte hier einfügen, wollte aber vorab fragen, welche Anpassung in Frage kommt.

milupo

Du solltest dir die Skripte bzw. CSS-Codes ansehen, die sich auf die ganze Tableiste beziehen.Aber auch mal nachsehen, wo die Tabhöhe geändert wird.

Fox2Fox

Habe mir jetzt mal diese CSS angesehen und leicht verändert.

CSS

/*Tab-Aussehen verändern*/

/* Abstand vom letzten Tab der Reihe nach rechts */

#tabbrowser-tabs{
margin-right:-20px!important
}

/* Neuer Tabbutton kleiner und unsichtbar gemacht*/

.tabs-newtab-button, #TabsToolbar > #new-tab-button, #TabsToolbar > toolbarpaletteitem > #new-tab-button {
    visibility:hidden!important;}

/* TAB normal (inaktiv):
 * Hintergrundfarbe, Schriftfarbe,
 * Rahmen um die TABs, oben abgerundet und Abstände angepasst,
 */
 
 #toolbar-menubar:not([autohide=true]) ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-background {
  border:none!important;}
 
#TabsToolbar .tabbrowser-tab {
  color: black !important;
  border: 1px solid !important;
  border-bottom: 1px solid black!important;
  background: #ffffff !important;                  /* weiß für inaktive Tabs*/
  border-radius: 3px 3px 0 0 !important;
  margin: 1px 1px 1px 1px !important;
  padding: 0px 0 !important;
}

/* TAB bei bei angewähltem TAB (aktiv):
 * Hintergrundfarbe, Rahmen,
 * Schriftfarbe.
 */
#TabsToolbar .tabbrowser-tab[selected="true"] {
 background: #fe3858 !important; 
  /*font-weight:bold !important;*/
  color: white ! important;
}

#TabsToolbar .tabbrowser-tab * {
  background: none !important;
}

Alles anzeigen

Vorher sah dieser Abschnitt so aus

CSS

#TabsToolbar .tabbrowser-tab {
  color: black !important;
  border: 1px solid !important;
  border-bottom: 1px solid black!important;
  background: #ffffff !important;                  /* weiß für inaktive Tabs*/
  border-radius: 2px 2px 0 0 !important;
  margin: 2px 1px 1px 2px !important;
  padding: 1px 0 !important;

Muss ich dann mal beobachten, ob sich die Höhe des Tabs immer noch spontan verringert.

Aber vielleicht kann mir jemand sagen, wie ich diesen kleinen Effekt weg bekomme

Auf jedem inaktiven Tab macht sich an der rechten Kante ein kleiner vertikaler Strich breit, wenn ich mit der Maus drüberfahre. Auf dem aktiven Tab ist der Effekt nicht zu sehen und auch nicht auf dem Tab, der sich links vom aktiven Tab befindet. Auf allen anderen inaktiven Tabs ist der Effekt zu sehen.

Hier noch mal vergrößert

2002Andreas

Zitat von Fox2Fox

wie ich diesen kleinen Effekt weg bekomme

Teste bitte mal:

CSS

.tabbrowser-tab::after, .tabbrowser-tab::before {
    margin-inline-start: 0px !important;
    border-left: 0px solid !important;
    border-image: none !important;
    border-image-slice: 0 !important;
    width: 0px !important;
    box-sizing: border-box;
    opacity: 0 !important;
    }

Evtl. reicht sogar diese Kurzform schon dafür.

CSS

.tabbrowser-tab::after, .tabbrowser-tab::before {
   display: none !important;
  }

Fox2Fox

Zitat von 2002Andreas

Evtl. reicht sogar diese Kurzform schon dafür.

Funktioniert damit.

Besten Dank!

Fox2Fox

Das Problem mit der spontanen Höhenveränderung trat nicht mehr auf.