выравнивание текста изображения, вопрос совместимости браузера

Question

У меня проблемы с позиционированием в разных браузерах.У меня короткий биоэлемент, и я хотел бы, чтобы элемент .bio_name прошел по изображению.Используя приведенные ниже стили, я работаю во всех распространенных браузерах (используемых в браузере Adobe), за исключением Safari 4.0 и IE 7 (хотя в IE 8 он отлично работает).Что изменилось с Safari 3 на Safari 4 / IE 7 t0 IE 8?

Пример ошибки

У меня есть такая структура:

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

, и она выглядит так:

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

Answer 1

То, как вы создаете эти "биоэлементы", не оптимально.

Попробуйте вместо этого:

Демонстрация в реальном времени ( редактировать )

Выглядит согласованно между IE7 / 8, Firefox, Chrome, Opera, Safari.

HTML:

<a name="person">
<div id="some_id" class="bio">
    <h3 class="bio_name">First Last First Last First Last First Last</h3> 
    <div class="add_bio">
        <img src="http://www.google.com/images/logos/ps_logo2.png" alt="blah" /> 
        <div>
            blah more
            <span class="add_bio_toggle">more</span>
        </div>
    </div>
</div>

CSS:

.add_bio {
    background: #ccc;
    overflow: auto
}
.add_bio div {
    margin-left: 170px
}
.bio {
    margin-bottom: 16px
}
.bio img {  
   float: left;  
   width: 160px;  
   height: 143px;  
   margin: 10px 0 0 0;
   border: 1px solid red
}
.add_bio_toggle {
    display: block;
    margin: 12px 0 0 0
}