css based menu Hover image shift when using ie8 zoom view

I having trouble with ie7&8 adaptive zoom view. The zoom causes my css based navigation menu button bar "hover" image substitution to shift position by about 1px. This causes a white line to appear. I'm using a "peek a boo" technique for image substitution. Here's a snippet of the css code:

#nav_forum,#nav_contact,#nav_store,#nav_projects,#nav_howto,#nav_news,#nav_about {
margin-bottom:1px;
width:90px;
}

#nav_relax,#nav_home {
margin-bottom:1px;
width:142px;
}

#nav_home a:hover {
background:url("header_images/navbar.jpg") no-repeat 0 -42px
}

#nav_about a:hover {
background:url("header_images/navbar.jpg") -142px -42px no-repeat
}

#nav_news a:hover {
background:url("header_images/navbar.jpg") -232px -42px no-repeat
}

#nav_howto a:hover {
background:url("header_images/navbar.jpg") -322px -42px no-repeat
}

#nav_projects a:hover {
background:url("header_images/navbar.jpg") -412px -42px no-repeat
}

#nav_store a:hover {
background:url("header_images/navbar.jpg") -502px -42px no-repeat
}

#nav_contact a:hover {
background:url("header_images/navbar.jpg") -592px -42px no-repeat
}

#nav_forum a:hover {
background:url("header_images/navbar.jpg") -682px -42px no-repeat
}

#nav_relax a:hover {
background:url("header_images/navbar.jpg") -772px -42px no-repeat
}

body#home_page a#home_active {
position:relative;
float:left;
height:41px;
width:142px;
background:url("header_images/navbar.jpg") no-repeat 0 -84px
}

body#about_page a#about_active {
position:relative;
float:left;
height:41px;
width:90px;
background:url("header_images/navbar.jpg") no-repeat -142px -84px
}

body#news_page a#news_active {
position:relative;
float:left;
height:41px;
width:90px;
background:url("header_images/navbar.jpg") no-repeat -232px -84px
}

body#howto_page a#howto_active {
position:relative;
float:left;
height:41px;
width:90px;
background:url("header_images/navbar.jpg") no-repeat -322px -84px
}

body#projects_page a#projects_active {
position:relative;
float:left;
height:41px;
width:90px;
background:url("header_images/navbar.jpg") no-repeat -412px -84px
}

body#contact_page a#contact_active {
position:relative;
float:left;
height:41px;
width:90px;
background:url("header_images/navbar.jpg") no-repeat -592px -84px
}

body#relax_page a#relax_active {
position:relative;
float:left;
height:41px;
width:142px;
background:url("header_images/navbar.jpg") no-repeat -772px -84px
}

Code (markup):

Any ideas how to fix this?

Here's a picture of the problem.