When I insert an image into the branding area of this site:
http://www.clickbasics.com/home/bhavanilorrainenelson/
the space below the tag line in the grey area gets smaller in height and
a white space of equal height appears between the branding and the main navigation areas. Without the image, there is no such space. Any ideas why?

CSS is:
Code:
div#branding, div#nav_main, div#site_info {
    width : 100%;
    }
    
#branding {
    position : relative;
    z-index : 10;
    min-height : 80px;
    background-color: #XXXXXX;
    color: #000;
    }
    
#branding a:link, #branding a:visited {
    color: #XXXXXX;
    background-color: transparent;
    text-decoration: none;
    padding: 4px;
}

#branding h4 {
    color: #XXXXXX;
    background-color: transparent;
    }
    
#branding .logo {
    float:left;
    margin-left:10px;
    margin-top:10px;
    }
    
#nav_main { 
    position : relative;
    z-index : 1;
    min-height : 30px;
    background-color : #XXXXXX;
    color: #XXXXXX;
    padding-top: 4px;
    }
HTML is:
HTML Code:
<div id="branding">
        <a href='/home/bhavanilorrainenelson/'><img src='/image_library/822.jpg' alt='Meditation bowl' class='std_img' /></a><h4>let your soul take flight with Bhavani's workshops and recordings</h4></div>

<div id="nav_main">
   <ul>
      <li><a href="/home/bhavanilorrainenelson/">Home</a>&nbsp;&nbsp;</li>
      <li><a href='/page/bhavanilorrainenelson/412/'>About Bhavani&nbsp;&nbsp;</a></li>
  </ul>

    <!-- end main navigation -->
</div>