Undesired Spacing

http://www.think-theory.com

Sorry to bother you guys, but I have a problem and I just can’t figure out what I need to do to solve it.

It’s my ‘headline’ section. For the most part, it works. Whenever a certain category is posted in, an image is also referenced in the custom fields below it. Through the coding, it puts the image in the headline, where only the five most recent are to be shown in order of the newest on the left and oldest on the right.

When I don’t have the coding for the five images and the links they have, everything is fine in terms of spacing. However, once I have them in, it pushes some of the content below it down 14px. I have the ‘headline_bg’ which is the background under those five images, and then after that is the ‘articles_spacer’ which is the background image that says “reviews” and “columns” on it. It’s also the background that the “join the forums” button sits on, which is obviously pushed down 14px. As well, the actual content in the reviews column and the columns column are both pushed down 14px instead.

I know I can do a simple ‘margin-bottom: -14px’ but that just covers up the problem; it doesn’t fix it. Normally I might do this, but I know it shouldn’t be like this and I discovered another problem that would muddle things up: I have all five images as links, so when you hover them, the cursor changes as it normally would. Then when you move the cursor to just below the images, where the 4px section of the background image shows, it goes back to not being a link, as it should. However, the top part of the ‘articles_spacer’ background image — or whatever is on top of it — has a small section that links to the same place that the image above it does.

How am I to get rid of this? Here is all the code I’ve used for the headline:

HEADER

<div id="headline_bg">

<?php $the_query = new WP_Query('cat=37, 39, 40&showposts=5&orderby=post_date&order=desc');

					while ($the_query->have_posts()) : $the_query->the_post();

					$do_not_duplicate = $post->ID; ?>

						<div id="headline_spacing">                              

<?php if ( get_post_meta($post->ID, 'headline_img', true) ) { ?>

						<div class="headline_img"><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/headline/<?php echo get_post_meta($post->ID, "headline_img", $single = true); ?>" alt="<?php the_title(); ?>" /></a></div>

<?php } ?>
                                </div>	

					<?php endwhile; ?>

CSS

/* HEADLINE
-------------------------------------------------------------- */

#headline_bg {
background-image: url('images/bg/featured.gif');
background-repeat: no-repeat;
background-position: top center;
height: 138px;
width: 1000px;
margin-left: -20px;
}

#headline_spacing {
float: left;
margin: 0 -8px 0 0;
padding: 4px 0 0 12px;
}

#headline_img {
height: 130px;
width: 192px;
margin-bottom: 0;
}

If you need to see more code, I can bring it up. I’m just wondering where I screwed up and what I need to do to fix it.

Any help is greatly appreciated.