[CSS] Bild im Link zu hoch

[godlike]

Habe ein Problem auf dessen Lösung ich einfach nicht komme Habe einen Link, anstelle eines Textes nutze ich eine Grafik. In Zukunft sollen aus mehreren Grafiken eine Zufallsgrafik angezeigt werden. Die Höhen variieren hierbei darum kann ich diese nicht angeben. Folgendes Szenario:

[src=css]a.bildlink {
background-color: #FFFFFF;
display: block;
margin-left: 4px;
overflow: hidden;
}
a.bildlink:hover img {
opacity: 0.8;
-webkit-transition: opacity .1s linear;
transition: opacity .1s linear;
}[/src]
[src=html4strict]<a href="http://www.domain.de/" target="_blank" class="bildlink"><img src="bild.jpg" /></a>[/src]
Sprich beim hover soll sich die Transparenz ändern und das Bild heller erscheinen (auf Grund des weißen Hintergrundes).

Nun habe ich das Problem das der Link immer zu hoch dargestellt wird und ich keine Ahnung habe wieso:

Der kleine weiße Rand unter der türkisen Grafik ist der weiße Hintergrund des Links welcher zu weit nach unten geht. Habe nun mit dem Web-Developer-Addon für Firefox geschaut ob noch weitere Styles greifen. Dem ist nicht so. Außer der Standartformatierung für Links:

[src=css]a
{
color: #ffffff;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
[/src]

Sonst greift hier kein anderes Style. Es wird auch nichts vererbt. Das würde mir das Addon ja anzeigen. Gebe ich für a.bildlink eine feste Höhe an, die der Grafik, passt alles. Diese weiß ich ja aber nicht wenn ich das alles dann per Zufall aufrufe.

Jemand Ideen dazu? Denkfehler meinerseits?

Viele Grüße

godlike

 

[epiphora]

Hey,

kannst Du mal ausprobieren, ob es Abhilfe schafft, wenn Du Deinem Bild auch [kw]display: block[/kw] zuweist? Ich könnte mir nämlich vorstellen, dass der Browser ansonsten noch irgendwelche Spaces rendert, die den ungewünschten Platz verursachen könnten.

Liebe Grüße.

 

[godlike]

Klasse, genau daran lag es Tausend Dank!