image text alignment, cross-browser-compatibility question

Hello all,
I'm having some cross-browser positioning problems. I've got a short bio element and I'd like for the .bio_name element to go over the image. Chrome and a few others get it right. Safari 4.0 and FF 3.6 get it wrong. Any ideas?

Update:
After changing the styles to what is displayed below, I've got it working in all prevalent browsers (those used in Adobe's Browserlab) except Safari 4.0, and IE 7 (in IE 8 it work great though). What changed from Safari 3 to Safari 4?

Example of error:

I have a structure like this:

<div id="some_id" class="bio">  
<h3>  
<img src="http://www.hello.com/some.jpg" alt="blah" />  
<a name="person"></a>  
</h3>  
<div class="bio_info">  
<h3 class="bio_name">First Last</h3>  
blah  
<div class="add_bio">blah more</div>  
</div>  
<span class="add_bio_toggle">more</span>  
</div>  

and it's styled like this:

.bio{  
   position: relative;  
   min-height: 175px;  
   }  

.bio img{  
   float: left;  
   margin-right: 10px;  
   width: 160px;  
   height: 143px;  
   vertical-align:text-top;  
   margin-top:10px; align:left;  
   }  

  .bio_info{  
   margin-top: -40px;  
   }  

.bio_info h3{  
   line-height: -1px;    
   margin-top: 7px;  
   }  

.add_bio_toggle{  
   display: block;   
   cursor: pointer;  
   color: blue;  
   }