Icon tauschen in der Lesezeichensymbolleiste

  • Hallo @all..

    evtl. kann mir jemand bitte mal sagen wo mein Fehler ist. :-??

    Ich lasse mir in der Lesezeichensymbolleiste nur die Icons anzeigen. Wenn ich dann das Icon austauschen möchte funktioniert das einwandfrei mit dieser Bezeichnung:

    Code
    #PlacesToolbarItems > toolbarbutton:nth-child(8){


    Damit wird das 8te Lesezeichen angesprochen.

    Nachteil dabei, ich darf das Icon dann nicht verschieben.

    Also habe ich es auf diese Art mal versucht:

    Dazu habe ich den Namen des Lesezeichens wieder eingefügt, sieht dann so aus:

    Code
    #PlacesToolbarItems > toolbarbutton[label="ebay"]{

    Anschließend habe ich per CSS den Text wieder ausgeblendet:

    CSS
    #PlacesToolbarItems > toolbarbutton[label="ebay"] >.toolbarbutton-text{
    	display:none!important;	
        }

    Funktioniert soweit einwandfrei, Ausnahme wenn ich das Lesezeichen mit der Maus berühre(hover).
    Dann ist der graue Hintergrund zu weit rechts.

    So sieht das aus:

    [attachment=0]Zwischenablage01.png[/attachment]

    Das ist mein kompl. Code dafür:

    An was habe ich jetzt nicht gedacht, damit der graue Hintergrund bei hover genau auf dem Icon ist?

    Für jegliche Hilfe vielen Dank vorweg.

  • Hallo,

    logisches Problem: du definierst ein padding-left von 23px, womit du die Box de facto 19px breiter machst (da ein padding-left von 4px Standard ist). Gleichzeitig sagst du aber mit background-position: 0px 2px, dass der Hintergrund ganz links angezeigt werden soll, denn die erste Angabe ist die Position auf der X-Achse.

    Da die Grafik ein Hintergrundbild des Elements und kein Kind-Element dieses Elements ist, hat das padding keine Auswirkungen auf die Grafik, sondern vergrößert lediglich die Fläche des Buttons. Änderst du das in background-position: center, wird das Icon mittig in dem Element angezeigt. Allerdings ist dann das ganze Icon zu weit rechts. Entferne die padding-Anweisung komplett, vergib stattdessen eine Breite wie z.B. 20px.

    Ich hab den Code mal aufgeräumt und alles Überflüssige rausgeschmissen.