VPF::Проблемы с версткой img+text в IE7/Opera

devmstr

Дата 5.7.2010, 12:57 (ссылка)

(нет голосов)

Загрузка ...

Developer

Профиль
Группа: Участник
Сообщений: 879
Регистрация: 28.4.2004
Где: Ukraine

Репутация: -1
Всего: 11

Есть контейнер и два 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;
    }

Работающий пример: тут

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

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

--------------------

Think different ©Steve Jobs
user posted image

devmstr

Дата 10.7.2010, 13:59 (ссылка)

(нет голосов)

Загрузка ...

Developer

Профиль
Группа: Участник
Сообщений: 879
Регистрация: 28.4.2004
Где: Ukraine

Репутация: -1
Всего: 11

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

Код


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

--------------------

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »