Проблема с изображением + разметка текста в IE 7 и Opera - PullRequest
Новая
       23

Проблема с изображением + разметка текста в IE 7 и Opera

1 голос
/ 05 июля 2010

Внутри находится контейнер для div и 2 div.Это должно быть изображение (первый div) и текст рядом с ним с выбранным расстоянием между ними.

альтернативный текст http://img24.imageshack.us/img24/1160/2delcontact.png

Код ниже отлично работает в Firefox / Chrome / Safari,но он работает некорректно в IE7 / Opera. альтернативный текст http://img710.imageshack.us/img710/5675/2delcontactie7opera.png

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

вот этот пример на сервере : ссылкатекст

В чем может быть причина этой проблемы?

1 Ответ

1 голос
/ 05 июля 2010

Попробуйте это

HTML 

<div id="mainContact">
        <img id="phoneImg" alt="phone" src="img/cellPhone.png" />
        <span id="topMailAddress">07897 255 664</span>
</div>
<br class="clear" />

CSS 

#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; // Adjust gap between image and text
    }
br.clear {
    clear: both;
    height: 1px;
    overflow:hidden;
    font-size: 1px; // For IE and the like
}

Веселись;)

...