Displaying img inline inside floated element for IE_问答_开发者

Displaying img inline inside floated element for IE

开发者 https://www.devze.com 2023-01-18 10:08 出处：网络

Having a headache with IE. I have an image (24x24) which I\'d like to display inline beside my username at the top navigation bar after logging in. It shows nicely 开发者_如何学Cin firefox, chrome. pr

Having a headache with IE. I have an image (24x24) which I'd like to display inline beside my username at the top navigation bar after logging in. It shows nicely 开发者_如何学Cin 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>

I altered the css and html source. I only have IE6 to work with, but it looks consistent in Chrome and IE6. Try this:

http://work.arounds.org/sandbox/38/run

<!doctype html> 
<html> 
<head> 
    <title></title> 
    <style type="text/css" media="screen"> 
    * { margin:0; padding:0; }

    #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;
           display:inline-block;
           margin-top: 4px;
           margin-left: 7px;
           height:24px;
           width:24px;
    }
#nav a { display:inline-block; vertical-align:top; }
.lol { display:inline-block; }
    #nav .right {
        float:right;
    }

    </style> 

<!--[if lt IE 8]>
<style>
#nav .menuitem a { display:inline; zoom:1; }
#nav .menuitem img { display:inline; zoom:1; border:1px solid red; vertical-align:top; }
</style>
<![endif]--> 

</head> 
<body> 

<div id="nav"> 

<div class="right menuitem"> 
<span class="lol">Welcome,</span> <a id="profile" href="http://localhost/usercp">user</a> <a id="profile-img" href="http://localhost/usercp"><img src="http://cdn1.sbnation.com/profile_images/273745/battle_scars_fedor_emelianenko_by_wildestdreamz_small.jpg"></a> 
</div> 

</div> 





</body> 
</html>

This snippet suffered from the float:right width calculation bug and I had to use inline-block workaround to get it to work right.

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).