c--: Block-Link (a / display:block) wird nicht richtig umrandet

Beitrag lesen

Hallo,

ich möchte umrandete Blöcke darstellen, die als Link funktionieren.
Links in dem Block soll ein Bild angezeigt werden und rechts (oben beginnend) davon soll der Text beginnen.

Ich mache aber irgend einen (Denk-?)Fehler, denn die Umrandung des Links endet unter dem Text, obwohl das Bild (und damit der ganze Link-Block) weiter nach unten reicht. Es wird also nicht der vollständige Block schwarz umrandet.

Wenn man zum Beispiel auf dem Bing-Bild die Maustaste gedrückt hält, zeigt der gepunktete Rand (der üblicherweise beim Klicken Links umrandet) genau den Bereich, den ich umrandet haben will, und in dem man klicken können soll.

Hier mal ein Beispielcode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
<head>  
<title>test</title>  
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1;">  
<style type="text/css">  
.blocklink { display:block; border-width:1px; border-style:solid; border-color:black; }  
.blocklink img { float:left; }  
</style>  
</head>  
<body>  
  
<a href="#" class="blocklink">  
<img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" alt="">  
  
<h2>test</h2>  
Dieser Text soll rechts neben dem Bild stehen.  
</a>  
  
<br>  
  
  
<a href="#" class="blocklink">  
<img src="http://www.underconsideration.com/brandnew/archives/bing_scaling.gif" alt="">  
  
<h2>ein weiterer test</h2>  
Dies ist eine zweite Box.  
</a>  
  
  
  
</body>  
</html>