rollover map internet and firefox promblem, div promblem Options

[themusicworld205...]

it works excellent in firefox but in internet explorer
it does not
see the picture then you will understand:
http://i27.tinypic.com/295wvnl.jpg

how can i make it look like firefox

this is in my top about me

CODE

<style type="text/css">
.home{z-index:5;line-height:10px;position:absolute;width:84px;height:26px;left:50%; margin-left:-350px;top:462}
.link3{z-index:5;line-height:10px;position:absolute;width:58px;height:23px;left:50%; margin-left:-250px;top:462}
.link4{z-index:5;line-height:10px;position:absolute;width:100px;height:27px;left:50%; margin-left:-108px;top:462}
.link5{z-index:5;line-height:10px;position:absolute;width:62px;height:34px;left:50%; margin-left:-180px;top:462}



.home{height: 26px; width: 84px; overflow: hidden; background:
url(http://i96.photobucket.com/albums/l179/dfg.png) top left no-repeat;
display: block;}
.home:hover{background-position: bottom left;}

.name3{height:27px; width: 57px; overflow: hidden; background:
url(http://i96.photobucket.com/albums/l179/dfg.png) top left no-repeat;
display: block;}
.name3:hover{background-position: bottom left;}

.name4{height:27px; width: 100px; overflow: hidden; background:
url(http://i96.photobucket.com/albums/l179/dfg.png) top left no-repeat;
display: block;}
.name4:hover{background-position: bottom left;}

.name5{height:34px; width: 62px; overflow: hidden; background:
url(http://i96.photobucket.com/albums/l179/dfg.png) top left no-repeat;
display: block;}
.name5:hover{background-position: bottom left;}


</style>