IE problem with menu

[FiRe]

a.navlink, a:link.navlink, a:active.navlink {
color: #fff;
font-weight: bold;
text-decoration: none;
padding: 2px!important;
padding: 1px;
}

a:hover.navlink {
color: #fff;
font-weight: bold;
text-decoration: none;
background-color: #7CB000;
background-image: url('images/nav_green.gif');
padding: 2px;
}

This works fine in firefox, but in IE I have to use a different padding value in order for the green background to display. Because of the 1 pixel difference, when you hover over a link in IE the whole thing jumps slightly. Is there any solution to this?

[edited by: FiRe at 11:05 pm (utc) on Sep. 6, 2006]

[Setek]

a.navlink, a:link.navlink, a:active.navlink {
color: #fff;
font-weight: bold;
text-decoration: none;
padding: 2px!important;
padding: 1px;
}
a:hover.navlink {
color: #fff;
font-weight: bold;
text-decoration: none;
background-color: #7CB000;
background-image: url('images/nav_green.gif');
padding: 2px;
}

Firstly, shouldn't your selectors go:

a.navlink, a.navlink:link, a.navlink:active, a.navlink:hover

respectively?

And in response to the "jump": it's because of your re-setting of the padding to 2px on hover - you can remove the padding on hover and it should stop jumping.

Or rehash the 2px!important + 1px rule a second time, but removing it should work :)

[FiRe]

it seems to work fine the other way around! thanks...

[edited by: FiRe at 8:16 am (utc) on Sep. 7, 2006]