Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Проблемы с версткой img+text в IE7/Opera

Автор: devmstr 5.7.2010, 12:57

Есть контейнер и два div-а. Первый содержит картинку, а второй некоторый текст на некотором(определенном) удалении от картинки:
user posted image

Все отлично работает в Firefox/Chrome/Safari, но возникли проблемы с IE7/Opera:
user posted image

xhtml:

Код


<div id="mainContact">
        <div id="contactIcon">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <img id="phoneImg" alt="phone" src="img/cellPhone.png" />
        </div>
        <div id="contactField">
            <span id="topMailAddress">07897 255 664</span>
        </div>
    </div>

css:

Код


html, body{ font-family: Tahoma;  }
    
    img{  border: 0px;  }
    
    #mainContact{
        width: 135px;
        float: right;
        overflow: hidden;
        font-family: Trebuchet MS;
    }
    
    #contactIcon{
        width: 19px;
        margin-right: 7px;
        float: left;
        text-align: right;
    }
    
    #phoneImg{
        position: relative;
        bottom: 14px;
    }
    
    #contactField{
        float: right;
        width: 109px;
        text-align: right;
        font-size: 1.12em;
        color: #454545;
    }
    
    #topMailAddress{
        position: relative;
        width: 109px;
        top: 13px;
    }

Работающий пример: http://109.74.203.141/stack/question01Cont/tmpPhone.html

В чем может быть причина такого поведения?

Заранее спасибо!

Автор: devmstr 10.7.2010, 13:59

Проблема решилась как то так:

Код


#mainContact {
    width: 200px; // Width of whole element - adjust to always fit number
}
    #mainContact #phoneImg,
    #mainContact #topMailAddress {
        display: block;
        float: left;
    }
    #mainContact #phoneImg {
        margin-right: 10px; 
    }
br.clear {
    clear: both;
    height: 1px;
    overflow:hidden;
    font-size: 1px; 
}