ansaurus

Question

Displaying img inline inside floated element for IE

Answer 1

+1 A:

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"&gt;user&lt;/a&gt; <a id="profile-img" href="http://localhost/usercp"&gt;&lt;img src="http://cdn1.sbnation.com/profile_images/273745/battle_scars_fedor_emelianenko_by_wildestdreamz_small.jpg"&gt;&lt;/a&gt; 
</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.

meder 2010-10-04 08:32:20

Answer 2

A:

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"&gt;user&lt;/a&gt;

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

vetler 2010-10-04 08:43:52

i got it to display nicely in IE with your snippet there, but used the style on the parent span .menuitem instead. one minor annoyance though, how do i add padding to the image? it goes all the way right, i'll need some padding for hovering

ongkybeta 2010-10-04 09:36:20

You can use background-position to move the image around inside the surrounding element, see: http://www.w3schools.com/css/pr_background-position.asp Alternatively, you can use margin to get more spacing (margin will create spacing that includes the background image).

vetler 2010-10-04 10:31:56

i used a background-position:92% and it's perfect. thanks a lot! also just to share with everyone, margin does not get hovered, only padding does. cheers.

ongkybeta 2010-10-04 10:42:18

ansaurus

tags:

views:

answers:

Displaying img inline inside floated element for IE

related questions