Problem with image + text layout in IE 7 & Opera

Question

There is div container and 2 divs inside. It should be image(first div) and text near it with chosen distance between them.

The code below works fine in Firefox/Chrome/Safari, but it works incorrect in IE7/Opera.

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

here is this example on server: link text

What can be the reason of this problem?

Answer 1

Try this

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
}

Have fun ;)