wierd white space appears when I insert image

[paulcj2]

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:

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:

<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>

[Nagash]

Let me guess it happens In IE correct?

This is the fix.

<div id="branding"><!-- prevents IE extra spaces
        --><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><!-- prevents IE extra spaces
        --><div id="nav_main">

In IE if you have an image and there are any whitespaces it displays them.

Also try setting the image to display: inline

[paulcj2]

Let me guess it happens In IE correct?

Actually no. It works fine in IE7. The problem shows up in Firefox 2.

The white space appears not near the image, but below the tag line.

Setting the display to inline had no effect.

[paulcj2]

Also, the white space does not show up in IE6.

[Erik J]

Maybe the browser default margin for h4 is the problem?

Test by set the #branding h4 {margin:0}

[paulcj2]

Maybe the browser default margin for h4 is the problem?

That was it! Many thanks.

[Dan Schulz]

And this is precisely why I use a margin/padding reset on just about every element that can safely handle it at the very top of my screen media stylesheet, like so:

html, body, address, blockquote, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, textarea, tt, var {
	margin: 0;
	padding: 0;
}