RadMenu and spacing between items

[J]

Hi - We are currently using RadMenu and trying to make it work consistently with IE 6 and IE 7. It looks good in IE 7 but in IE 6, there is spacing between each sub-menu option. Also, strangely in IE 6, on hover over the sub-menu links, the color does not change for all sub-menu options. The css we are using is as below. Any ideas? Thanks.


.RadMenu_yankee {
    height: 14px;
    margin-left: 12px;
}
.RadMenu_yankee .link {
    padding-left: 7px;
    padding-right: 7px;
    line-height: 14px;
    text-decoration:none;
    cursor: pointer;   
}

.RadMenu_yankee .link:hover, .RadMenu_yankee .focused, .RadMenu_yankee .expanded {   
    cursor: pointer;
}
 
.RadMenu_yankee .text {
    font-size: 1.1em;
font-weight:bold;
    font-family: font-family:Arial, Helvetica, sans-serif;
    color:white;
    text-transform:none;
}
.RadMenu_yankee .Selected .text, .RadMenu_yankee .link:hover .text {
    color:#E3B367;
}
.RadMenu_yankee .group {
}
.RadMenu_yankee .group .text,
.RadMenu_yankee .group .link:hover .text {
    font-size: 1.1em;
    font-weight:normal;
    text-transform:none;
    padding-left:2px;
    margin-left:0pt;
}
.RadMenu_yankee .group .link {
    background: #00709E ;
    text-align: left;
    color:#0068A5;
    cursor: pointer;
    border:solid 8px #00709E;
}

.RadMenu_yankee .group .link:hover, .RadMenu_yankee .group .focused, .RadMenu_yankee .group .expanded {
    /* makes hover orange on item */
    font-weight: normal;
    color:#0068A5;
    cursor: pointer;
}
.RadMenu_yankee .leftArrow, .RadMenu_yankee .rightArrow,
.RadMenu_yankee .topArrow, .RadMenu_yankee .bottomArrow,
.RadMenu_yankee .leftArrowDisabled, .RadMenu_yankee .rightArrowDisabled,
.RadMenu_yankee .topArrowDisabled, .RadMenu_yankee .bottomArrowDisabled {
    background: #ededed url('img/left.gif') center center no-repeat;
    width:15px;
}
.RadMenu_yankee .topArrow, .RadMenu_yankee .topArrowDisabled {
    background-image:url('img/top.gif');
    width:100%;
}
.RadMenu_yankee .bottomArrow, .RadMenu_yankee .bottomArrowDisabled {
    background-image:url('img/bottom.gif');
    width:100%;
}
.RadMenu_yankee .rightArrow, .RadMenu_yankee .leftArrow {
    height:100%;
}
.RadMenu_yankee .rightArrow, .RadMenu_yankee .rightArrowDisabled {
    background-image: url('img/right.gif');
}
.RadMenu_yankee .expandLeft, .RadMenu_yankee .expandRight {
    background: transparent url(img/groupImage.gif) right center no-repeat;
    /*margin-right: 4px;*/
}
.RadMenu_yankee .link:hover .expandLeft,
.RadMenu_yankee .link:hover .expandRight,
.RadMenu_yankee .focused .expandLeft,
.RadMenu_yankee .focused .expandRight,
.RadMenu_yankee .expanded .expandLeft,
.RadMenu_yankee .expanded .expandRight {
    background:transparent url(img/invertedGroupImage.gif) right center no-repeat;
}

[Erjan Gavalji]

Hi J,

I'm afraid I could not get the problem you mentioned. Please, find attached the page I used along with screenshots in IE6 and IE7. Am I missing something?

Regards,
Erjan Gavalji
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center