I am trying to use the clip in a HTML page using CSS.
I have it working fine in IE but for some reason it's not displaying correctly in Chrome.
I am trying to use just 1 image (icons.png) and use it for all my buttons but only displaying part of the image per button.
For example, button1 should only show icon1 from the icons.png image and button2 should only show icon2 from the icons.png image etc..
The Page looks like the following in IE (this is what I want it to look like in all browsers)
In Chrome this is what it looks like:
The image (icons.png) I am using looks like this:
The code I am using is this:
<style type="text/css">
/* Button Locations */
.icon1 { position:absolute; left: 20px; width:110px; height:110px; top:20px; cursor: pointer; display: block; /* hand-shaped cursor */ cursor: hand; /* for IE 5.x */ }
.icon2 { position:absolute; left: 180px; width:110px; height:110px; top:20px; cursor: pointer; display: block; /* hand-shaped cursor */ cursor: hand; /* for IE 5.x */ }
.icon3 { position:absolute; left: 340px; width:110px; height:110px; top:20px; cursor: pointer; display: block; /* hand-shaped cursor */ cursor: hand; /* for IE 5.x */ }
.icon4 { position:absolute; left: 100px; width:110px; height:110px; top:170px; cursor: pointer; display: block; /* hand-shaped cursor */ cursor: hand; /* for IE 5.x */ }
.icon5 { position:absolute; left: 260px; width:110px; height:110px; top:170px; cursor: pointer; display: block; /* hand-shaped cursor */ cursor: hand; /* for IE 5.x */ }
.icon6 { position:absolute; left: 20px; width:110px; height:110px; top:320px; cursor: pointer; display: block; /* hand-shaped cursor */ cursor: hand; /* for IE 5.x */ }
.icon7 { position:absolute; left: 180px; width:110px; height:110px; top:320px; cursor: pointer; display: block; /* hand-shaped cursor */ cursor: hand; /* for IE 5.x */ }
.icon8 { position:absolute; left: 340px; width:110px; height:110px; top:320px; cursor: pointer; display: block; /* hand-shaped cursor */ cursor: hand; /* for IE 5.x */ }
/* Button Icons */
img.icon1_logo { position:absolute; left: 13px; top:3px; clip: rect(0px,307px,100px,0px); /* rect(top, right, bottom, left) */ cursor: pointer; /* hand-shaped cursor */ cursor: hand; /* for IE 5.x */ }
img.icon2_logo { position:absolute; left: -69px; top:3px; clip: rect(0px,307px,100px,0px); /* rect(top, right, bottom, left) */ cursor: pointer; /* hand-shaped cursor */ cursor: hand; /* for IE 5.x */ }
img.icon3_logo { position:absolute; left: -160px; top:-98px; clip: rect(0px,307px,240px,0px); /* rect(top, right, bottom, left) */ cursor: pointer; /* hand-shaped cursor */ cursor: hand; /* for IE 5.x */ }
img.icon4_logo { position:absolute; left: -155px; top:3px; clip: rect(0px,390px,240px,0px); /* rect(top, right, bottom, left) */ cursor: pointer; /* hand-shaped cursor */ cursor: hand; /* for IE 5.x */ }
img.icon5_logo { position:absolute; left: 10px; top:-101px; clip: rect(0px,100px,240px,0px); /* rect(top, right, bottom, left) */ cursor: pointer; /* hand-shaped cursor */ cursor: hand; /* for IE 5.x */ }
img.icon6_logo { position:absolute; left: -75px; top:-101px; clip: rect(0px,180px,240px,0px); /* rect(top, right, bottom, left) */ cursor: pointer; /* hand-shaped cursor */ cursor: hand; /* for IE 5.x */ }
img.icon7_logo { position:absolute; left: 10px; top:-200px; clip: rect(0px,307px,285px,0px); /* rect(top, right, bottom, left) */ cursor: pointer; /* hand-shaped cursor */ cursor: hand; /* for IE 5.x */ }
img.icon8_logo { position:absolute; left: -75px; top:-205px; clip: rect(0px,307px,385px,0px); /* rect(top, right, bottom, left) */ cursor: pointer; /* hand-shaped cursor */ cursor: hand; /* for IE 5.x */ }
</style>
<body bgcolor="#DFDFDF">
<button id="icon1" onclick="show_page('1');" class="icon1"><img class="icon1_logo" src="icons.png"/></button>
<button id="icon2" onclick="show_page('2');" class="icon2"><img class="icon2_logo" src="icons.png"/></button>
<button id="icon5" onclick="show_page('3');" class="icon5"><img class="icon5_logo" src="icons.png"/></button>
<button id="icon4" onclick="show_page('4');" class="icon4"><img class="icon4_logo" src="icons.png"/></button>
<button id="icon6" onclick="show_page('5');" class="icon6"><img class="icon6_logo" src="icons.png"/></button>
<button id="icon3" onclick="show_page('6');" class="icon3"><img class="icon3_logo" src="icons.png"/></button>
<button id="icon7" onclick="show_page('7');" class="icon7"><img class="icon7_logo" src="icons.png"/></button>
<button id="icon8" onclick="show_page('8');" class="icon8"><img class="icon8_logo" src="icons.png"/></button>
</body>
Anyone know what I have done wrong for it not to work in Chrome?