Adding link to image messes up CSS

[extinction]

Hi.

I wanted to make the pictures on the front page of http://extinction.dk/ link to the same page as the "Læs mere" link.

I would've thought it would be as simple as taking the original code:

<div class="block_inside">  <img src="<?php echo $row_getArticle1['thumbnail']; ?>" class="thumbnail" alt="Mini1"  />
        <h4><?php echo $row_getArticle1['title']; ?></h4>
        <p><?php echo $row_getArticle1['description']; ?> <a href="articles/article.php?article_id=<?php echo $row_getArticle1['article_id']; ?>">Læs mere</a></p>
        <small><?php echo $row_getArticle1['formatted']; ?></small> </div>

And adding a simple <a href [...] like so:

      <div class="block_inside">  <a href="articles/article.php?article_id=<?php echo $row_getArticle1['article_id']; ?>"><img src="<?php echo $row_getArticle1['thumbnail']; ?>" class="thumbnail" alt="Mini1"  /></a>
        <h4><?php echo $row_getArticle1['title']; ?></h4>
        <p><?php echo $row_getArticle1['description']; ?> <a href="articles/article.php?article_id=<?php echo $row_getArticle1['article_id']; ?>">Læs mere</a></p>
        <small><?php echo $row_getArticle1['formatted']; ?></small> </div>

But apparently this is wrong, as I get the following result:
http://extinction.dk/pic.png

The CSS for the front page is as follows:

@charset "utf-8";
/*CSS reset*/
body, div, h1, h2, h3, h4, h5, h6, p, ul, img{margin:0px;padding:0px;}
a img {border: none; }

/* Font styles */
body, td, pre {color:#606060; font-family:Arial, Helvetica, sans-serif;	background-color:#e2e2e2; font-size: 14px;}
h4 {font-size: 24px; font-weight: bold;}
small {font-size: 12px; color: #373737;}
#content a, #sidebar a {color: #2a3f53; font-weight: bold; text-decoration: none;}
#content small {float: left; position:absolute; right:330px; bottom:20px; font-style: italic;}
.block_inside a {position:absolute; right:30px; bottom:20px;} /* "Læs mere" linket */

/* Header */
#main {background: url(../images/header_slice.jpg) repeat-x;}
#logo {background: url(../images/logo.png) no-repeat; height: 120px; width: 450px;}
#logo h1 {text-indent: -9999px;}
#header {padding-top: 38px;}
ul.dropdown {padding-top:30px;}

/* Content */
.container {width:1000px; margin: 0 auto;} /*Container er 'beholderen' til alt andet indhold på siden*/
#content {padding-top:25px;	width:630px; float:left;}
  
/* Sidebar */
#sidebar{float:left; margin-left:10px; margin-top:25px;}

.block_inside, #sidebar {margin-bottom:10px; position:relative; overflow:auto; background:none; background-color:#e2dddc; padding:15px; border-radius: 10px; border:1px solid #a1a1a1; box-shadow: 3px 3px 4px #555;}
#sidebar {width:260px;}

.thumbnail {float:left; margin-right:20px; border:1px solid #979390; }

/*Footer*/
#footer {background:url(../images/footer_slice.gif) repeat-x; padding-top:20px; padding-bottom:30px; margin-top:25px; color:#e2e2e2;}
#footer p {float:left;}
#footer img {position:relative; left:400px; top:-10px;}

where ".thumbnail" is the specific styling for the thumbnail image.

Thanks for your help.

[tracknut]

This style:

.block_inside a {position:absolute; right:30px; bottom:20px;} /* "Læs mere" linket */

gets applied when you put the anchor around the images. I suspect that's not what you wanted!

Dave

[extinction]

Oh, that totally slipped right by my sight.

Great, thanks a lot! Fixed now