Hack background-position using sprites in IE7

Posted on by

IEYup, is time for another hack for IE 7, this time I needed to find a way to correct an issue with a sprite that is used as background image to display a set of icons in a list of links (a set of <a> inside a <li>) and depending of the type of recourse is the icon that is displayed. (using the CSS background-position Property)

As usual all works perfect in FF, Chrome, Safari, Opera, and even IE8+, but since IE 7 doesn´t support inline-block property, in some cases, not only the icon of the resource was displayed but some of the rest of the icons in the sprite too!, that happened only in the items where the text of the link was longer that the defined width of the container, in my case an <a> tag (see the image below), so in that cases, I needed to find a way to display only the correct icon.background_images_icons_1The fist step of my solution was to use the hack to mimic inline-block on block elements, since that is what I needed, be able to use inline-block in IE7:

CSS:

.the_rule
{
// more declarations ...
*display: inline;
*zoom: 1;
}

Once applied those declarations in the css rule that is applied to all <a> tags only the text of the links was lined up correctly (see the next image), well, apparently I needed to do something more, ok, the next step was to find a way to only display the correct icon and hide the rest of them (that should not appear from the beginning and are not displayed in others browsers even IE8+ ) and at the same time show all the text of the URL, interesting isn’t?

background_images_icons_2After sometime, the final step of my solution was to add a height value in the css rule, in my particular case the same height of the icons (18px) to force to hide the rest of the icons that are part of the same sprite and also to display the complete URL,  as you can see in the next image, hoooray!!:

background_images_icons_3

Note: The blue border around the <a> tag shows the dimensions of the element <a>.

CSS:

.the_rule
{
// more declarations ...
*display: inline;
*zoom: 1;
height:18px;
}

Be careful with the rest of the elements that may be below the one you add the hack!!, depending of your HTML structure is possible you need to find a way to control or force the position of the elements since they could move up, as was my case, see the next image:

background_images_icons_4Hope you find this information useful!!