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?

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">  
<img src="http://www.hello.com/some.jpg" alt="blah" />  
<a name="person"></a>  
<div class="bio_info">  
<h3 class="bio_name">First Last</h3>  
<div class="add_bio">blah more</div>  
<span class="add_bio_toggle">more</span>  

and it's styled like this:

   position: relative;  
   min-height: 175px;  

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

   margin-top: -40px;  

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

   display: block;   
   cursor: pointer;  
   color: blue;  

1 answer

Sisira 95

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
Answered over 8 years ago by Sisira
  • Nope. No change. Thanks for the idea, though... Dan Woodson over 8 years ago