This is driving me batty - just can't find a way to fix my superfish menu to work with IE…

The issue is to do with my requirement for a fixed height for the navigation, necessary for the css sprite to function as desired.

The top level navigation has a 140px height - a doubling of 70px. So I've set the block level <a> tag to 70px. All lovely in Safari + Firefox, but IE 7 seems to add about 10px to my <a> tag so that the next level of the sprite is visible.

The same seems to happen with the sub-menu - again, there seems to be additional space on the <a> tags so the sprite goes out of sync.

Crap!

Anyone got a solution? Or know why IE is adding the unwanted space? And if I can't fix my height this way with superfish - can I do anything else? Would a horizontal sprite be a better idea?

Here's the link:
http://subdomain.penandtonic.org/

Here's the CSS:

/******* NAVIGATION DIV ******* /
#access {
border-bottom:none;
height:70px;
font-size:14px;
overflow:visible;
z-index:100;
}
.menu ul { float: right }

/******* SUPERFISH ESSENTIAL STYLES ******* /
.sf-menu, .sf-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu {
line-height: 1.0;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 258px; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
float: left;
position: relative;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0;
top: 2.5em; /* match top ul list item height */
z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 258px; /* match ul width */
top: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 258px; /* match ul width */
top: 0;
}



/******* MY SKIN******* /

.sf-menu {
border-right:none;
float:left;
font-family: 'KomikaDisplayKapsRegular', 'Comic Sans', 'Comic Sans MS', 'Marker Felt', 'Apple Chancery', 'Purisa', 'URW Chancery L', cursive;
text-transform: uppercase
}
.ie6 .sf-menu { margin-bottom: -1px; }
.sf-menu li {
text-align: center;
width: 159px;
}
.sf-menu a {
height: 70px;
line-height: 50px;
margin: 0;
padding: 0;
text-decoration:none;
border: none;
}
.windows .sf-menu a {padding-bottom: 1px}
.sf-menu a, .sf-menu a:visited {
color: rgb(48,48,48);
background: transparent url(images/nav_sprite_small.png) no-repeat 0 0;
}
.sf-menu a:hover, .sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:active, .sf-menu a:focus, .sf-menu .current-menu-item a {
background: transparent url(images/nav_sprite_small.png) no-repeat 0 -70px;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
outline: 0;
border-bottom-color:none;
}
.sf-menu li, .sf-menu li li, .sf-menu li li li {
background: transparent;
border: none;
padding: 0;
margin: 0;
}
.sf-menu li li, .sf-menu li li li { margin: 0 0 0 10px }
.sf-menu ul {
border: none;
font-size: 12px;
}
.sf-menu li:hover ul, .sf-menu li.sfHover ul {
top:70px; /* overriding essential styles */
}
.sf-menu ul li, .sf-menu ul li:hover, .sf-menu ul li.sfHover {
background: none;
text-align: left;
}
.sf-menu ul a {
width: 258px;
height: 60px;
padding: 0 0 0 25px;
background: none;
border: none;
}
.sf-menu ul a, .sf-menu ul a:visited, .sf-menu .current-menu-item ul a {
background: transparent url(images/nav_subli_sprite_small.png) no-repeat 0 0;
color: rgb(48,48,48)
}
.sf-menu ul a:hover, .sf-menu ul a:focus, .sf-menu ul a:active, .sf-menu ul .current-menu-item a {
background: transparent url(images/nav_subli_sprite_small.png) no-repeat 0 -60px;
color: rgb(48,48,48)
}
.sf-menu ul ul { margin-top:0; }