CSS Image Sprites in IE7

[hxhl95]

Hi everyone, I've got a few icons I'm using sprites for, however they seem to work in every single browser except IE7. My code's very simple:

<div style="display:inline;margin:0 10px">
<a href="javascript:window.print()" title="Print">
Print Page <div class="useicon" style="background-position:0px 0px"></div>
</a>
</div>

My useicon class:

div.useicon {
display:inline;
height:16px;
width:16px;
background:url('../img/icons.gif') no-repeat 0px 0px;
padding:0 8px
}

Now the problem apparently is the display:inline part of that - the sprites just don't show up as long as that div is inline (if I remove display:inline the sprites show up but the thing is I want everything on the same line). Already tried using span instead of div, unfortunately it appears that as long as the object is inline the sprites won't show up. Any suggestions? The padding: 0 8px is there to keep the width at 16px, because some browsers completely collapse the div because it's empty even though I've specified width:16px. Thanks in advance :)

[Gerben Jongerius]

You might need to add a space to your div containing the sprite, inline rendering should always cause the height attribute to be ignored. You will also need to add the style a {text-decoration: none;} to avoid an ugly line in your empty div.

[hxhl95]

Thanks! I can't believe I forgot to try that. It's working fine now.

[jahangir_ahmad]

Hi dear you can let div#useicon stay block level but you must change a to block level and then float the div#useicon for gain width and height. and that work in all IE versions. here the css code:

a
{
display:block;
width:16px;
height:16px;
overflow:hidden;
}
div#useicon
{
width:16px;
height:16px;
float:left;
}

I used overflow for get arount collapse height because of floating div#useicon.