I have a large sprite image with a link around it, the link has a property of parent and the image a property of child.
I am using the css clip technique to pull a particular piece of the image. However, in my chrome browser even though I am positioning my child element absolute and giving it an overflow of hidden it is causing the browser to have vertical/horizontal scrollbar.
.parent{
margin-top: 10px;
text-decoration: none;
display: block;
}
.child {
border: 0;
position: absolute;
margin-top: -154px;
clip: rect(152px, 296px, 234px, 0px);
float: left;
overflow: hidden;
}
Usage:
<a href="/" class="parent"> <img src="largeImage.png" class="child" /> </a>
Works fine in firefox and Internet Explorer 8.