AnyLink CSS Menu v2.2 IE y-pos

[jkk]

1) Script Title: AnyLink CSS Menu v2.2

2) Script URL (on DD): Link

3) Describe problem: My menu and the demo #3 on DD are both off by exactly +1 pixel on the y-axis when I view them in IE5-7. Could someone please help me with the JS code to reduce the y-pos by 1 pixel for IE?

Thanks in advance.

[ddadmin]

Is it just in IE5-7? What about IE8? Are the anchor links styled in some way that adds extra padding/margin to them?

[jkk]

It works for IE8 and other recent browsers, but not for IE5-7. Other than that 1 pixel it's fine.

Here's what it looks like (default settings):

[ddadmin]

My hunch is the issue is due to something in the CSS used to create the demo vertical menu, and not an inherent positioning issue with the script itself. I'm on IE8 on this computer, so can't readily test this out, but I'd start by changing some of the padding/margin values in the demo menu's CSS:

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.urbangreymenu{
width: 170px; /*width of menu*/
}

.urbangreymenu .headerbar{
font: bold 13px Verdana;
color: white;
background: #606060;
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
text-indent: 10px;
padding: 7px 0 7px 0; /*31px is left indentation of header text*/
}

.urbangreymenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}

.urbangreymenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.urbangreymenu ul li a{
font: normal 12px Arial;
color: black;
position: relative;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}

.urbangreymenu ul li a:visited{
color: black;
}

.urbangreymenu ul li a:hover, .urbangreymenu ul li a.selectedanchor{ /*hover state CSS*/
color: white;
background: black;
}


</style>

[jkk]

Thanks for your efforts, but it didn't solve the problem. However, I think that it's a css related issue too.

//As a temporary solution I added a top margin of 1px to the anylinkcss class for up to IE7. Is there a chance of getting it to work without browser specific hacks?