Unwanted white area - css

Question

Have a look at the picture: http://i.stack.imgur.com/jkK3u.jpg
I try to create a site title floating above the header image, but there is an unwanted space that I can not erase. Here is my CSS code:
#header {
clear:both;
overflow:hidden;
z-index:1;
position:relative;
max-width:1130px;
margin:10px auto 0;
}
.site_title {
overflow:hidden;
margin-top:50px;
background-color:#c03;
height:40px;
width:50%;
float:left;
}
.st_hidden .site_title {
}
.site_title h1 {
float:left;
padding:0 0 0 10px;
font-size:28px;
font-family:'Segoe UI', 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif;
}
/*site title*/
.site_title h1 a {
color:#fff;
line-height:36px;
}
/* site title */
.site_title h1 .header_logo a {
overflow:hidden;
display:block;
width:100%;
height:36px;
text-indent:-9999px;
}
.site_title h2 {
float:left;
height:20px;
overflow:hidden;
line-height:18px;
padding:10px 0 0 20px;
color:#fff;
font-size:12px;
font-weight:normal;
}
/* site slogan*/
#header_image {
max-width:1130px;
max-height:182px;
margin-bottom:5px;
padding:1px;
border:2px solid #ccc;
margin-top:0px;
}
.st_hidden #header_image {
margin-top:5px;
}
#header_image_border {
overflow:hidden;
width:100%;
height:100%;
}
#header_image_border img {
width:100%;
height:100%;
}
and here is my HTML code:
<div id="header"<?php if($zbench_options['hide_title']!='') echo ' class="st_hidden"'; ?>>
<?php $logo=''; if($zbench_options['logo_url']!='') $logo=' class="header_logo" style="background:url('.$zbench_options['logo_url'].') no-repeat 0 0"'; ?>
<div class="site_title">
<h1 <?php if($logo) echo $logo; ?>><?php bloginfo('name'); ?></h1>
<h2><?php bloginfo('description');?></h2>
<div class="clear"></div>
</div>
<?php if ( get_header_image() != '' ) {
?>
<div id="header_image">
<div id="header_image_border">
<img src="<?php header_image(); ?>" width="1130" height="180" alt="" />
</div>
</div>
<?php } ?>
</div>

Answer 1

The space is caused by this line:
margin-top: 50px
in .site_title tag. You should remove this line. If you want to place the text really on the image and not next to it, add
position: absolute | relative
to the image and set the top attribute - it depends on exactly what you want to get.