Question

Having a headache with IE. I have an image (24×24) which I’d like to display inline beside my username at the top navigation bar after logging in. It shows nicely in firefox, chrome. problem with IE version 7. The img breaks to another line, and other sibling items in the float back left.

CSS below:

    #nav {
           background:url("../images/nav-bg.jpg") repeat-x scroll 0 0 #FFFFFF;
           height:35px;
           line-height:35px;
    }
    #nav .menuitem{
        padding: 0 7px;
        cursor: pointer;
        font-size: 11px;
        float:left;
    }
    #nav .menuitem, #nav .menuitem a {
        color:#CCCCCC;  
    }
    #nav .menuitem:hover {
        background-color:#333333;
    }
    #nav .menuitem img {
           -moz-border-radius:3px;
           -webkit-border-radius:3px;
           border:1px solid #111;
           float: right;
           margin-top: 4px;
           margin-left: 7px;
           height:24px;
           width:24px;
    }
    #nav .right {
        float:right;
    }

I have tried many variations but can’t seem to fix the problem. I have also tried variations of the css below, but the image still doesn’t show nicely inline.

#nav .menuitem img {
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border:1px solid #111;
    float: right;
    margin-top: 4px;
    margin-left: 7px;
    height:24px;
    width:24px;
    display:inline;
    position:relative;
    top: 0px;
    line-height: 35px;
}

The HTML code as follows

<span class="menuitem right">Welcome, <a id="profile" href="http://localhost/usercp">user<img src="avatar24x24.jpg"></a></span>

Answer 1

Use a background image instead, like this:

<a style="background-image: url(avatar24x24.jpg);
          background-repeat: no-repeat;
          background-position: right center; padding-right: 30px;"
          id="profile" href="http://localhost/usercp">user</a>

Should position it pretty well, tested it in Opera, IE8 compatability mode and Firefox. To display the entire image, tune the height of the elements around it.

You can use background-position to move the image around inside the surrounding element, there’s more information on this at w3schools.com.

Alternatively, you can use margin to get more spacing (margin will create spacing that includes the background image).