Es ist zum Verzweifeln ?

[Japs]

Der Hovereffekt bei den Social-Buttons hängt viel zu tief.
Kann mir Jemand sagen weshalb ?

Link: http://neu.repricing.de/de/ - im Footer rechts

Ich suche mir hier einen Wolf
Gruß Dirk

[Kahmoon]

Es liegt daran das dein a kein Block sondern ein Inlinelement ist (siehe Anhang). Somit ist das Element zu klein.

display:block;
width:50px;
height:50px;

Sollte das lösen

Außerdem solltest du in das a keine Grafik legen sondern generell dem a eine Hintergrundgrafik per CSS zuweisen. Bei :hover dann eine andere Hintergrundgrafik. So wie es aktuell ist, würde man ein korrekt platziertes Hintergrundbild nicht sehen weil es ja hinter dem img Tag liegen würde.

[Japs]

Irgendwie verstehe ich das jetzt nicht:

<div id="social">
<div class="foho1">
<a  href="https://plus.google.com/+RepricingDe/posts"><img src="/files/repricing/images/social/google_sozial.png" border="0" alt="Google+"></a>
</div>
<div class="foho2">
<a  href="https://www.facebook.com/Repricing"><img src="/files/repricing/images/social/facebook_social.png" border="0" alt="Facebook"></a>
</div>
<div class="foho3">
<a  href="https://twitter.com/repricing"><img src="/files/repricing/images/social/twitter_sozial.png" border="0" alt="Twitter"></a>
</div>
</div>

CSS zB. so:

#social .foho1:hover {
    float:left;
    background-image:url("files/repricing/images/social/google_sozial_hover.png");
    display:block;
    width:50px;
    height:50px;
}

#social {
    float:right;
    margin-top:25px;
}

Bekomme es aber jetzt nicht nebeneinander ?

[Kahmoon]

Ich würde es wie folgt machen

a.socialbutton{
    float:left; 
    display:block; 
   width:50px;
   height:50px;
   text-indent:-3000px;
}

a.foho1{
    background:url("files/repricing/images/social/facebook_sozial.png") center center no-repeat;
}
a.foho1:hover{
    background:url("files/repricing/images/social/facebook_sozial_hover.png") center center no-repeat;
}
....

HTML

<a class="socialbutton foho1" href="#">Facebook</a>
<a class="socialbutton foho2" href="#">Google+</a>
...

Eine noch saubere Lösung wäre es mit Spritegrafiken zu arbeiten und diese bei Hover nur per background-position zu verschieben. Dann hast du beim ersten hovern kein flackern, weil er das Bild erst noch laden muss. Mit Sprites ist es dann schon geladen.