SharePoint 2010 uses the “sprite” technique in some of its default layouts. Sprite is a method of showing multiple images on your site that are really just a portion of one larger image. A benefit is that it reduces HTTP traffic since you are downloading more images in one request. You can read more about the technique in these blogs:
CSS Sprites: Image Slicing’s Kiss of Death | IE6, CSS Sprites and Alpha Transparency | How To: Optimize Your Site with Image Sprites
For this blog I will get into how SharePoint 2010 uses the technique to show the Help icon, the Search icons, and several more images. Take a look at the single image below:
It is one image that contains several icons.
If you look at a SharePoint 2010 page you will see the Help icon in the top left corner of the page alone, without any of the other icons around it. This is done by putting the image above in a SPAN element that is 14 pixels by 15 pixels. That is only large enough to show one icon. The CSS of the element is also specifying that any overflow be hidden. So the image inside will not push the element to be larger. Here is the CSS for the span element:
display:inline-block;
height:15px;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
width:14px;
The final piece of the puzzle is to make the Help icon show in the span and not the top left corner of the image. That is done with this CSS code on the IMG element:
position:absolute;
top:-94px !important;
left:0 !important;
The IMG is position property is set to absolute. Then the TOP property is given a negative value. The Help icon starts 94 pixels into the image so with the TOP property value at –94px the Help icon shows in the SPAN of 14×15 pixels and then the rest of the image is hidden.
Good post. Have enjoyed the visit. See you next time. I wait for future development. You rock. Cheerfull.