css vertical navbar spacing browser compatibility

[larzeb2000]

I made a vertical navbar using a background image for the buttons. When
I tested under FF or Opera, it looks fine, with the buttons touching
vertically. However, in IE6 the buttons are spaced apart vertically by
the amount of padding I used to vertically center the text on the
button. IE7 has vertical spacing also, but only a small amount.

Any suggestions on how to handle this difference?

To see the buttons with the padding,
www.powell-electric.com/nav_pad.html
and without at,
www.powell-electric.com/nav_nopad.html

The stylesheet with the padding is:
#navcontainer ul {
list-style-type: none;
text-align: left;
padding: 0;
margin: 0;
}

#navcontainer ul li {
background: transparent url(state_up.gif) top left no-repeat;
width: 130px;
height: 32px;
}
#navcontainer ul li a {
text-align:center;
padding-top: 7px;
font: normal 12px "Lucida Grande", "Lucida Sans Unicode", verdana,
lucida, sans-serif;
text-decoration: none;
display: block;
height: 100%;
color: #00c;
}

[larzeb2000]

I figured that if I reduced the height of the anchor element to 25px,
that the 7px plus that set the element's height to 32px.

Why does IE(6&7) both have a margin of 1px vertical space between the
buttons, whereas FF and Opera do not?

TIA, larzeb

[Neredbojias]

To further the education of mankind, la********@yahoo.com vouchsafed:

I figured that if I reduced the height of the anchor element to 25px,
that the 7px plus that set the element's height to 32px.

Why does IE(6&7) both have a margin of 1px vertical space between the
buttons, whereas FF and Opera do not?

Actually, on both your examples I saw no difference between ie6 and ff.

--
Neredbojias
Infinity has its limits.