tags:

views:

19

answers:

0

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.