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:

From Picasa

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

1 answer

Sisira 95
0
points

The line height may do the trick for you. We can set the line-height to 15px or 1.1em. See following code

 .bio_info h3
    {
    line-height:15px;
}
Answered about 8 years ago by Sisira
  • Nope. No change. Thanks for the idea, though... Dan Woodson about 8 years ago